/* "Your room" page (room.php) */

body { margin: 0; background: #fff; color: #333; font: 14px/1.45 Lato, "Helvetica Neue", Arial, sans-serif; }
[hidden] { display: none !important; }
.rp { max-width: 980px; margin: 0 auto; padding: 16px; }
.rp h1 { font-size: 22px; margin: 0 0 12px; color: var(--rp-brand); font-weight: 700; }
.rp-lead { font-size: 16px; }
.rp-muted { color: #777; font-size: 13px; }
.rp-msg { font-size: 16px; }

.rp-btn-brand { background: var(--rp-brand); border-color: var(--rp-brand); color: #fff; }
.rp-btn-brand:hover, .rp-btn-brand:focus { color: #fff; filter: brightness(0.92); }
.btn.on { outline: 2px solid var(--rp-brand); outline-offset: 1px; }

/* Upload */
.rp-tips { padding-left: 20px; color: #555; }
.rp-file { position: relative; overflow: hidden; margin: 8px 0; }
.rp-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
#rp-thumb { display: block; max-width: 260px; max-height: 180px; margin: 8px 0; border-radius: 4px; }
.rp-consent { display: block; font-weight: normal; margin: 12px 0; max-width: 620px; }
.rp-consent input { margin-right: 6px; }

/* Working */
#rp-progress { text-align: center; padding: 60px 0; }
.rp-spinner { width: 40px; height: 40px; margin: 0 auto 16px; border: 4px solid #e5e5e5; border-top-color: var(--rp-brand);
              border-radius: 50%; animation: rp-spin 1s linear infinite; }
@keyframes rp-spin { to { transform: rotate(360deg); } }

/* Result: the result image is clipped over the original photo to compare them */
#rp-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; touch-action: none; user-select: none; }
#rp-before { display: block; max-width: 100%; height: auto; }
#rp-after { position: absolute; inset: 0; overflow: hidden; }
#rp-after img { display: block; width: 100%; height: 100%; }
#rp-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#rp-stage.busy { opacity: 0.6; }
#rp-compare { width: 100%; max-width: 980px; margin: 8px 0 0; }
.rp-compare-help { margin: 2px 0 8px; }
.rp-note { background: #f5f5f2; border-radius: 4px; padding: 6px 10px; }
.rp-warn { background: #fff4e5; color: #8a4b00; }
.rp-toolbar { margin: 10px 0; }
.rp-toolbar .btn, .rp-tools .btn { margin: 0 6px 6px 0; }

/* Adjust */
#rp-adjust { border-top: 1px solid #e5e5e5; padding-top: 10px; max-width: 620px; }
#rp-adjust input[type=range] { width: 100%; margin-bottom: 8px; }
#rp-adjust label { font-weight: normal; margin-top: 6px; }
#rp-extras label { display: inline-block; margin: 2px 18px 2px 0; font-weight: normal; }
#rp-extras input { margin-right: 6px; }

.rp-error { color: #b42318; font-weight: bold; }

@media (max-width: 600px) {
    .rp { padding: 10px; }
    .rp h1 { font-size: 19px; }
    .rp-toolbar .btn { width: 100%; margin-right: 0; }
}