/* Sinterklaas Planner - publieke formulieren */
/*
 * 0.5.1: gebruik voor alle publieke Planner-schermen een normaal, goed leesbaar
 * WordPress/system-font. Sommige thema's geven de inhoudscontainer een monospace
 * lettertype; `inherit` nam dat daardoor onbedoeld over. Als het thema een
 * WordPress body/system font-preset aanbiedt, gebruiken we die eerst.
 */
.sp-public-form,
.sp-customer-portal,
.sp-customer-request,
.sp-auth-page,
.sp-sint-portal {
    color: #222 !important;
    font-family: var(--wp--preset--font-family--body, var(--wp--preset--font-family--system-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif)) !important;
}

.sp-public-form *,
.sp-customer-portal *,
.sp-customer-request *,
.sp-auth-page *,
.sp-sint-portal * {
    font-family: inherit;
}

.sp-public-form {
    max-width: 850px;
    padding: 24px;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    background: #fff !important;
    box-sizing: border-box;
}

.sp-public-form h2,
.sp-public-form p,
.sp-public-form label,
.sp-public-form .login-remember,
.sp-customer-portal h2,
.sp-customer-portal p,
.sp-customer-request h3,
.sp-customer-request p,
.sp-customer-request strong {
    color: #222 !important;
}

.sp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.sp-public-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.sp-public-form input:not([type=checkbox]),
.sp-public-form select,
.sp-public-form textarea,
.sp-public-form input[type=text],
.sp-public-form input[type=email],
.sp-public-form input[type=password],
.sp-public-form input[type=tel],
.sp-public-form input[type=date],
.sp-public-form input[type=time],
.sp-public-form input[type=number] {
    width: 100% !important;
    box-sizing: border-box;
    padding: 11px 12px !important;
    border: 1px solid #777 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #222 !important;
    -webkit-text-fill-color: #222 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}


.sp-public-form input::placeholder,
.sp-public-form textarea::placeholder {
    color: #666 !important;
    opacity: 1;
}

.sp-public-form input:focus,
.sp-public-form select:focus,
.sp-public-form textarea:focus {
    outline: 3px solid rgba(34, 113, 177, .25) !important;
    border-color: #2271b1 !important;
}

.sp-public-form button,
.sp-public-form input[type=submit] {
    display: inline-block;
    padding: 12px 20px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: #a41515 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    cursor: pointer;
    font-weight: 700;
    line-height: 1.2;
    font-family: inherit !important;
    font-size: inherit !important;
}


.sp-public-form button:hover,
.sp-public-form input[type=submit]:hover {
    background: #7d1010 !important;
}

.sp-public-form a,
.sp-customer-portal a {
    color: #7d1010 !important;
    text-decoration: underline;
}

.sp-login-form #loginform p {
    margin-bottom: 16px;
}

.sp-login-form .login-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sp-login-form input[type=checkbox] {
    width: auto !important;
}

.sp-account-links {
    margin-top: 14px;
}

.sp-success {
    padding: 14px 18px;
    border-left: 4px solid #46b450;
    background: #edf8ef !important;
    color: #183b20 !important;
    margin-bottom: 18px;
}

.sp-error {
    padding: 12px;
    margin: 0 0 18px;
    border-left: 4px solid #b32d2e;
    background: #fcf0f1 !important;
    color: #571417 !important;
}

.sp-customer-request {
    padding: 18px;
    margin: 0 0 18px;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    background: #fff !important;
}

.sp-customer-request h3 {
    margin-top: 0;
}

.sp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 700px) {
    .sp-form-grid { grid-template-columns: 1fr; }
    .sp-public-form { padding: 16px; }
}

.sp-portal-actions {
    margin: 0 0 22px;
}

.sp-action-button,
.sp-customer-portal .sp-action-button {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 6px;
    background: #a41515 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 700;
    line-height: 1.2;
}

.sp-action-button:hover,
.sp-customer-portal .sp-action-button:hover {
    background: #7d1010 !important;
    color: #fff !important;
}

.sp-children-section {
    margin: 26px 0 18px;
}

.sp-children-section h3 {
    margin-bottom: 6px;
    color: #222 !important;
}

.sp-help {
    margin-top: 0;
    color: #555 !important;
}

.sp-child-card {
    margin: 18px 0;
    padding: 18px;
    border: 1px solid #d7d7d7;
    border-radius: 10px;
    background: #fafafa;
}

.sp-child-card legend {
    padding: 0 8px;
    font-weight: 700;
    color: #222;
}

.sp-keyword-counter {
    display: block;
    margin-top: 5px;
    font-size: .9em;
    color: #666;
}

.sp-sint-portal { max-width: 980px; margin: 0 auto; }
.sp-sint-card { font-size: 1.05em; }
.sp-sint-card h3 { font-size: 1.35em; }
.sp-sint-child { margin: 10px 0; padding: 12px; border-radius: 8px; background: #f7f7f7; }
.sp-internal-note { padding: 12px; border-left: 4px solid #a41515; background: #fff4f4; }
@media (min-width: 768px) {
  .sp-sint-card { padding: 24px; }
  .sp-sint-card .sp-action-button { font-size: 1.05em !important; padding: 14px 22px; }
}
.sp-secondary-button,
.sp-customer-portal .sp-secondary-button { background: #555 !important; }
.sp-secondary-button:hover,
.sp-customer-portal .sp-secondary-button:hover { background: #333 !important; }

/* Sintportaal 0.4.1: één afspraak per scherm, groot en iPad-vriendelijk */
.sp-sint-portal {
    max-width: 920px;
}
.sp-sint-intro {
    font-size: 1.15em;
    line-height: 1.55;
}
.sp-sint-topbar {
    display: flex;
    justify-content: center;
    margin: 18px 0 12px;
    font-size: 1.15em;
}
.sp-sint-slide[hidden] {
    display: none !important;
}
.sp-sint-card {
    font-size: 1.22em;
    line-height: 1.55;
    padding: 30px !important;
    border-radius: 14px;
}
.sp-sint-card h3 {
    font-size: 1.75em;
    line-height: 1.2;
    margin: 18px 0;
}
.sp-sint-time {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid #ececec;
}
.sp-sint-date {
    font-size: 1.25em;
    font-weight: 700;
}
.sp-sint-clock {
    font-size: 2em;
    line-height: 1;
    font-weight: 800;
}
.sp-sint-address,
.sp-sint-phone {
    font-size: 1.1em;
}
.sp-sint-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    position: sticky;
    bottom: 12px;
    z-index: 20;
    padding: 14px;
    margin-top: 18px;
    background: rgba(255,255,255,.96);
    border: 1px solid #e1e1e1;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,.09);
}
.sp-sint-nav-button {
    min-height: 64px;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 1.15em;
    font-weight: 800;
    cursor: pointer;
    background: #a41515;
    color: #fff;
}
.sp-sint-nav-button:disabled {
    opacity: .35;
    cursor: default;
}
.sp-sint-prev {
    background: #555;
}
@media (max-width: 700px) {
    .sp-sint-card { font-size: 1.12em; padding: 20px !important; }
    .sp-sint-time { display: block; }
    .sp-sint-date, .sp-sint-clock { display: block; }
    .sp-sint-clock { margin-top: 8px; }
    .sp-sint-navigation { grid-template-columns: 1fr; }
    .sp-sint-nav-button { min-height: 60px; }
}


/* Sint-modus 0.4.2: extra eenvoudige iPad-weergave */
.sp-sint-mode .sp-sint-intro { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.sp-sint-mode .sp-sint-card h3 { font-size: 2em; margin-top: 22px; }
.sp-sint-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0 26px;
}
.sp-sint-big-action,
.sp-sint-portal .sp-sint-big-action {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    padding: 16px 22px !important;
    border-radius: 12px;
    text-decoration: none !important;
    font: inherit;
    font-size: 1.3em !important;
    font-weight: 800;
    line-height: 1.2;
    color: #fff !important;
    background: #a41515 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.sp-sint-portal .sp-sint-call { background: #2f6b3a !important; }
.sp-sint-portal .sp-sint-big-action:hover,
.sp-sint-portal .sp-sint-big-action:focus { filter: brightness(.92); }
.sp-sint-mode .sp-sint-children > strong,
.sp-sint-mode .sp-sint-card > p > strong { font-size: 1.08em; }
.sp-sint-mode .sp-sint-child { font-size: 1.08em; padding: 16px; }
@media (max-width: 700px) {
    .sp-sint-quick-actions { grid-template-columns: 1fr; }
    .sp-sint-big-action, .sp-sint-portal .sp-sint-big-action { min-height: 68px; }
    .sp-sint-mode .sp-sint-card h3 { font-size: 1.65em; }
}


/* 0.5.0: één duidelijke login/registratiepagina */
.sp-auth-page { max-width: 1040px; margin: 0 auto; color:#222; }
.sp-auth-intro { margin:0 0 20px; padding:16px 18px; background:#fff8e8; border-left:5px solid #a41515; border-radius:8px; font-size:1.05em; color:#222; }
.sp-auth-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start; }
.sp-auth-panel { max-width:none; margin:0; height:100%; }
.sp-auth-panel h2 { margin-top:0; color:#222 !important; }
.sp-auth-panel form { margin:0; }
@media (max-width: 760px) { .sp-auth-grid { grid-template-columns:1fr; } }

/* 0.6.0: beschikbaarheid en verzendbeveiliging */
.sp-public-form .sp-help[data-sp-availability-help] { display:block; margin-top:6px; font-size:.92em; color:#555 !important; }
.sp-public-form button[disabled] { opacity:.65; cursor:wait !important; }
.sp-submit-wait[hidden] { display:none !important; }
.sp-submit-wait { position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(255,255,255,.88); }
.sp-submit-wait > div { max-width:520px; padding:28px 32px; border-radius:14px; background:#fff; border:2px solid #a41515; box-shadow:0 12px 40px rgba(0,0,0,.18); text-align:center; font-size:1.12em; line-height:1.55; color:#222; }
.sp-submit-wait strong { font-size:1.35em; }

/* Klantportaal: kindgegevens zelf aanpassen */
.sp-portal-child-summary{margin:10px 0;padding:12px 14px;border:1px solid #ddd;border-radius:8px;background:#fafafa;line-height:1.55}
.sp-child-edit{margin-top:16px;border:1px solid #ddd;border-radius:10px;background:#fff;overflow:hidden}
.sp-child-edit>summary{cursor:pointer;font-weight:700;padding:14px 16px;background:#f6f6f6;list-style-position:inside}
.sp-child-edit[open]>summary{border-bottom:1px solid #ddd}
.sp-child-edit-form{padding:16px}
.sp-child-edit-form .sp-child-card{margin:0 0 16px;padding:14px;border:1px solid #ddd;border-radius:8px}
.sp-child-edit-form input{width:100%;box-sizing:border-box}
@media (max-width:640px){.sp-child-edit-form{padding:12px}.sp-child-edit-form .sp-form-grid{display:block}.sp-child-edit-form .sp-action-button{width:100%;text-align:center}}