/* ── RTG-Form Formulier – Frontend CSS ── */

/* ── CSS Kleurvariabelen (instelbaar via Stijl-scherm) ── */
:root {
    --pf-primary:           #2271b1;
    --pf-primary-dark:      #135e96;
    --pf-primary-light:     #eef4fd;
    --pf-primary-rgb:       34, 113, 177;

    --pf-text:              #333333;
    --pf-text-light:        #6b7280;
    --pf-label:             #333333;

    --pf-input-bg:          #ffffff;
    --pf-input-border:      #cccccc;
    --pf-input-border-focus: var(--pf-primary);
    --pf-input-text:        #333333;
    --pf-input-radius:      5px;

    --pf-radio-bg:          #fafafa;
    --pf-radio-border:      #e0e0e0;
    --pf-radio-hover-bg:    #f0f6ff;
    --pf-radio-hover-border: var(--pf-primary);
    --pf-radio-radius:      5px;

    --pf-btn-bg:            #2271b1;
    --pf-btn-text:          #ffffff;
    --pf-btn-hover-bg:      #135e96;
    --pf-btn-radius:        6px;

    --pf-success-bg:        #d4edda;
    --pf-success-border:    #c3e6cb;
    --pf-success-text:      #155724;

    --pf-error-bg:          #f8d7da;
    --pf-error-border:      #f5c6cb;
    --pf-error-text:        #721c24;

    --pf-required:          #e74c3c;
    --pf-tooltip-bg:        #c0392b;
    --pf-tooltip-text:      #ffffff;

    --pf-form-bg:           transparent;
    --pf-form-max-width:    860px;

    --pf-font-family:       inherit;
    --pf-font-size:         14px;

    /* Conditionele velden markering */
    --pf-conditional-accent: #f59e0b;
    --pf-conditional-label:  #92400e;
}

.pf-form-wrap {
    font-family: var(--pf-font-family);
    font-size: var(--pf-font-size);
    max-width: var(--pf-form-max-width);
    margin: 0 auto;
    background: var(--pf-form-bg);
    color: var(--pf-text);
}

.pf-success-message {
    background: var(--pf-success-bg);
    border: 1px solid var(--pf-success-border);
    color: var(--pf-success-text);
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 20px;
}

.pf-error-message {
    background: var(--pf-error-bg);
    border: 1px solid var(--pf-error-border);
    color: var(--pf-error-text);
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
}

.pf-form-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

/* Field widths */
.pf-field { display: flex; flex-direction: column; gap: 5px; }
.pf-field-full    { width: 100%; }
.pf-field-half    { width: calc(50% - 8px); }
.pf-field-third   { width: calc(33.33% - 11px); }
.pf-field-quarter { width: calc(25% - 12px); }

/* Labels */
.pf-field label,
.pf-group-label {
    font-weight: 600;
    font-size: var(--pf-font-size);
    color: var(--pf-label);
    display: block;
}
.pf-required { color: var(--pf-required); }

/* Inputs */
.pf-field input[type="text"],
.pf-field input[type="email"],
.pf-field input[type="tel"],
.pf-field textarea,
.pf-field select,
.pf-timeslot-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    font-size: var(--pf-font-size);
    color: var(--pf-input-text);
    background: var(--pf-input-bg);
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--pf-font-family);
}

.pf-field input:focus,
.pf-field textarea:focus,
.pf-field select:focus,
.pf-timeslot-select:focus {
    outline: none;
    border-color: var(--pf-input-border-focus);
    box-shadow: 0 0 0 2px rgba(var(--pf-primary-rgb), .15);
}

.pf-field textarea { resize: vertical; min-height: 110px; }

/* Select arrow */
.pf-field select,
.pf-timeslot-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

/* HTML text blocks */
.pf-field-html .pf-html-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--pf-text);
    margin: 6px 0 0;
    padding: 0;
}

/* Radio & Checkbox groups */
.pf-radio-group,
.pf-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.pf-radio-label,
.pf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--pf-font-size);
    color: var(--pf-text);
    cursor: pointer;
    padding: 6px 10px;
    border: 1px solid var(--pf-radio-border);
    border-radius: var(--pf-radio-radius);
    background: var(--pf-radio-bg);
    transition: background .15s, border-color .15s;
}
.pf-radio-label:hover,
.pf-checkbox-label:hover {
    background: var(--pf-radio-hover-bg);
    border-color: var(--pf-radio-hover-border);
}
.pf-radio-label input,
.pf-checkbox-label input {
    width: 16px; height: 16px; flex-shrink: 0;
    accent-color: var(--pf-primary);
}

/* Timeslots */
.pf-timeslot-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.pf-timeslot-nr {
    font-size: 13px;
    font-weight: 600;
    color: var(--pf-text-light);
    white-space: nowrap;
    min-width: 80px;
}

/* Submit */
.pf-submit-wrap { justify-content: flex-start; margin-top: 8px; }
.pf-submit-btn {
    background: var(--pf-btn-bg);
    color: var(--pf-btn-text);
    border: none;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--pf-btn-radius);
    cursor: pointer;
    transition: background .2s, transform .1s;
    font-family: var(--pf-font-family);
}
.pf-submit-btn:hover  { background: var(--pf-btn-hover-bg); }
.pf-submit-btn:active { transform: scale(.98); }
.pf-submit-btn:disabled { background: #aaa; cursor: not-allowed; }

/* Upload-voortgang */
.pf-upload-progress {
    margin-top: 12px;
    max-width: 320px;
}
.pf-upload-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--pf-input-border);
    overflow: hidden;
}
.pf-upload-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--pf-primary);
    transition: width .15s ease-out;
}
.pf-upload-progress-bar.pf-upload-progress-bar--indeterminate {
    width: 40% !important;
    animation: pf-progress-indeterminate 1.1s ease-in-out infinite;
}
@keyframes pf-progress-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.pf-upload-progress-text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--pf-text-light);
    font-family: var(--pf-font-family);
}

/* Conditional fields */
.pf-conditional { transition: opacity .25s; }
.pf-conditional.pf-hidden { display: none !important; }

/* Conditionele velden — visuele markering */
.pf-conditional:not(.pf-hidden) {
    position: relative;
}
.pf-conditional:not(.pf-hidden)::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pf-conditional-accent, #f59e0b);
    border-radius: 3px;
}
.pf-conditional:not(.pf-hidden) label,
.pf-conditional:not(.pf-hidden) .pf-group-label {
    color: var(--pf-conditional-label, #92400e);
}

/* Scheidingslijn veld */
.pf-field-divider {
    width: 100%;
}

/* Datumveld */
.pf-field-date input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    font-size: var(--pf-font-size);
    color: var(--pf-input-text);
    background: var(--pf-input-bg);
    box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    font-family: var(--pf-font-family);
    appearance: none;
    -webkit-appearance: none;
}
.pf-field-date input[type="date"]:focus {
    outline: none;
    border-color: var(--pf-input-border-focus);
    box-shadow: 0 0 0 2px rgba(var(--pf-primary-rgb), .15);
}

/* Per-veld fout tooltip */
.pf-field-error-tooltip {
    display: none;
    font-size: 12px;
    color: var(--pf-tooltip-text);
    background: var(--pf-tooltip-bg);
    border-radius: 4px;
    padding: 4px 9px;
    position: relative;
    margin-top: 4px;
    line-height: 1.4;
    width: fit-content;
    max-width: 100%;
}
.pf-field-error-tooltip--visible { display: inline-block; }
.pf-field-error-tooltip--visible::before {
    content: '';
    position: absolute;
    top: -6px; left: 12px;
    border: 6px solid transparent;
    border-bottom-color: var(--pf-tooltip-bg);
    border-top: none;
}

/* ── Foto upload / dropzone ── */
.pf-dropzone {
    border: 2px dashed var(--pf-input-border);
    border-radius: var(--pf-input-radius);
    background: var(--pf-input-bg);
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    overflow: hidden;
}
.pf-dropzone:hover,
.pf-dropzone--over {
    border-color: var(--pf-primary);
    background: var(--pf-primary-light);
    box-shadow: 0 0 0 3px rgba(var(--pf-primary-rgb), .1);
}
.pf-dropzone-inner {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 28px 20px 22px;
    text-align: center; gap: 6px; transition: opacity .2s;
}
.pf-dropzone-inner--full { padding: 12px 20px; opacity: .5; pointer-events: none; }
.pf-dropzone-icon { font-size: 36px; line-height: 1; }
.pf-dropzone-text { font-size: 14px; color: var(--pf-text); font-weight: 500; }
.pf-dropzone-browse { color: var(--pf-primary); text-decoration: underline; cursor: pointer; }
.pf-dropzone-hint { font-size: 12px; color: var(--pf-text-light); }
.pf-dropzone-previews { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 14px 14px; }
.pf-preview-thumb { position: relative; width: 90px; flex-shrink: 0; border-radius: 7px; overflow: visible; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.pf-preview-thumb img { width: 90px; height: 90px; object-fit: cover; border-radius: 7px; display: block; border: 1px solid var(--pf-input-border); }
.pf-preview-name { display: block; font-size: 10px; color: var(--pf-text-light); text-align: center; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.pf-preview-remove { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--pf-required); color: #fff; border: 2px solid #fff; font-size: 11px; cursor: pointer; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: background .15s, transform .1s; display: flex; align-items: center; justify-content: center; }
.pf-preview-remove:hover { background: #a93226; transform: scale(1.1); }

@media (max-width: 600px) {
    .pf-field-half { width: 100%; }
    .pf-timeslot-row { flex-direction: column; align-items: flex-start; }
    .pf-timeslot-nr { min-width: auto; }
    .pf-dropzone-inner { padding: 20px 14px 16px; }
    .pf-preview-thumb { width: 75px; }
    .pf-preview-thumb img { width: 75px; height: 75px; }
}