#ppfoto-container label {
    display: block;
    margin-top: 15px;
}
#ppfoto-container select,
#ppfoto-container input[type='file'] {
    width: 100%;
    padding: 5px;
}

.ppfoto-getting-started {
    background: #e8f4ff;
    border: 1px solid #b3d9ff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.ppfoto-getting-started h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #0057b8;
}
.ppfoto-getting-started p {
    margin: 5px 0;
    font-size: 0.9em;
}

.ppfoto-trust-block {
    background: #f0fff0;
    border: 1px solid #b3ffb3;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}
.ppfoto-trust-block p {
    margin: 5px 0;
    font-size: 0.9em;
}

.ppfoto-hint {
    font-size: 0.85em;
    color: #666;
    margin: 5px 0 10px;
}
.ppfoto-warning {
    color: #b32d2e;
    font-weight: 600;
}

.ppfoto-sliders {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 15px 15px;
    margin-top: 10px;
}
.ppfoto-sliders label {
    margin-top: 8px;
    font-size: 0.9em;
}
.ppfoto-sliders input[type='range'] {
    width: 100%;
}

.ppfoto-preview-wrap {
    margin-top: 15px;
    text-align: center;
}
#ppfoto_canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: grab;
    touch-action: none; /* verslepen van de uitsnede werkt ook op touchscreens */
}
#ppfoto_canvas:active {
    cursor: grabbing;
}

#ppfoto_quote {
    margin-top: 15px;
    font-size: 1.1em;
}
#ppfoto-container .quote-box {
    background: #f7f7f7;
    border: 1px solid #ddd;
    padding: 12px 15px;
    border-radius: 4px;
}
#ppfoto-container .quote-breakdown {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}
#ppfoto-container .quote-breakdown td {
    padding: 5px 4px;
    border-bottom: 1px solid #e0e0e0;
}
#ppfoto-container .quote-breakdown td:last-child {
    text-align: right;
    white-space: nowrap;
}
#ppfoto-container .quote-breakdown tr:last-child td {
    border-bottom: none;
}
#ppfoto-container .quote-total td {
    padding-top: 8px;
    font-size: 1.05em;
    border-top: 2px solid #ccc !important;
}
#ppfoto-container .quote-note {
    margin: 10px 0 0;
    font-size: 0.82em;
    color: #666;
    font-style: italic;
}

.ppfoto-rights {
    display: block;
    margin-top: 15px;
    font-size: 0.9em;
}
.ppfoto-rights input {
    margin-right: 8px;
}
.ppfoto-rights.ppfoto-error {
    outline: 2px solid red;
    padding: 4px;
    border-radius: 4px;
}