/* RequestArtLab Konfigurator — dark theme, transparent, adapts to page color */
.ral-k {
    max-width: 700px;
    margin: 0 auto;
    padding: 1.5rem 0;
    font-family: inherit;
    --acc:      #d69d00;
    --acc-dark: #a37800;
    --acc-bg:   rgba(214,157,0,0.12);
    --acc-glow: rgba(214,157,0,0.35);
    /* Inherit color-scheme from theme — prevents browser from forcing white bg on inputs */
    color-scheme: inherit;
}
.ral-k *, .ral-k button, .ral-k input, .ral-k textarea {
    font-family: inherit;
    box-sizing: border-box;
}
.ral-k svg {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.3 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
.ral-k svg * { fill: none !important; stroke: currentColor !important; }
.ral-card.on svg, .ral-card.on svg * { stroke: var(--acc) !important; }
.ral-ci svg { width: 32px !important; height: 32px !important; }
.ral-ci { opacity: .55; display: block; margin-bottom: 8px; }

/* lang bar */
.ral-lang-bar { display: flex; gap: 8px; margin-bottom: 1.5rem; justify-content: flex-end; }
.ral-lb { background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 6px 14px; font-size: 12px; cursor: pointer; color: inherit; opacity: .35; transition: all .15s; }
.ral-lb:hover { opacity: .7; }
.ral-lb.on { opacity: 1; border-color: var(--acc); color: var(--acc); font-weight: 600; background: var(--acc-bg); }

/* progress */
.ral-prog { display: flex; gap: 4px; margin-bottom: 1.5rem; }
.ral-pd { height: 3px; flex: 1; border-radius: 2px; background: currentColor; opacity: .15; }
.ral-pd.on { background: var(--acc); opacity: 1; }

/* steps */
.ral-step { display: none; }
.ral-step.active { display: block; }
.ral-sl { font-size: 11px; color: inherit; opacity: .45; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.ral-st { font-size: 22px; font-weight: 700; color: inherit; margin: 0 0 1.4rem; }

/* cards */
.ral-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 1.5rem; }
.ral-card { background: transparent; border: 1px solid currentColor; border-radius: 14px; padding: 1.1rem; cursor: pointer; text-align: center; transition: all .15s; opacity: .55; }
.ral-card:hover { opacity: 1; }
.ral-card.on { border: 2px solid var(--acc); background: var(--acc-bg); opacity: 1; }
.ral-card.on .ral-ct { color: var(--acc); }
.ral-ct { font-size: 13px; font-weight: 600; color: inherit; }
.ral-cs { font-size: 11px; color: inherit; opacity: .5; margin-top: 3px; }

/* radio rows */
.ral-rrow { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1.5rem; }
.ral-ro { display: flex; align-items: center; gap: 12px; background: transparent; border: 1px solid currentColor; border-radius: 10px; padding: 12px 16px; cursor: pointer; transition: all .15s; opacity: .55; }
.ral-ro:hover { opacity: 1; }
.ral-ro.on { border: 2px solid var(--acc); background: var(--acc-bg); opacity: 1; }
.ral-ro.on .ral-rt { color: var(--acc); font-weight: 500; }
.ral-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; flex-shrink: 0; display: flex; align-items: center; justify-content: center; opacity: .5; }
.ral-ro.on .ral-dot { border-color: var(--acc); background: var(--acc); opacity: 1; }
.ral-doti { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: none; }
.ral-ro.on .ral-doti { display: block; }
.ral-rt { font-size: 13px; color: inherit; }

/* swatches */
.ral-swg { margin-bottom: 1.5rem; }
.ral-swl { font-size: 11px; color: inherit; opacity: .45; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ral-sws { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 1rem; }
.ral-sw { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .15s; }
.ral-sw:hover { transform: scale(1.12); }
.ral-sw.on { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-glow); }

/* inputs */
.ral-ig { margin-bottom: 1.2rem; }
.ral-ig label { font-size: 11px; color: inherit; opacity: .45; display: block; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ral-ig input[type=text], .ral-ig input[type=email], .ral-ig input[type=tel], .ral-ig textarea {
    width: 100%; padding: 10px 14px;
    border: 1px solid currentColor; border-radius: 8px;
    font-size: 13px; color: inherit;
    background: transparent; outline: none;
    transition: border-color .15s; opacity: .65;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.ral-ig input:focus, .ral-ig textarea:focus { border-color: var(--acc); opacity: 1; }
.ral-ig textarea { resize: vertical; min-height: 70px; }

/* upload */
.ral-cre-info { font-size: 13px; color: inherit; opacity: .65; background: transparent; border: 1px solid currentColor; padding: 1rem; border-radius: 10px; line-height: 1.6; }
.ral-uz { background: transparent; border: 1px dashed currentColor; border-radius: 10px; padding: 1.5rem; text-align: center; cursor: pointer; margin-bottom: 1rem; transition: all .15s; opacity: .4; }
.ral-uz:hover { border-color: var(--acc); opacity: 1; }
.ral-uzi svg { width: 30px !important; height: 30px !important; }
.ral-uzi { display: block; margin-bottom: 8px; }
.ral-uzt { font-size: 13px; color: inherit; }
.ral-fi { display: none; }
.ral-fn { font-size: 12px; color: var(--acc); margin-top: 8px; padding: 6px 12px; background: var(--acc-bg); border-radius: 8px; display: inline-block; }

/* nav buttons */
.ral-nav { display: flex; gap: 10px; margin-top: 1.5rem; }
.ral-btn { background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 10px 20px; font-size: 13px; cursor: pointer; color: inherit; opacity: .4; transition: opacity .15s; }
.ral-btn:hover { opacity: 1; }
.ral-btnp { background: var(--acc); border: none; color: #fff; border-radius: 8px; padding: 10px 24px; font-size: 13px; cursor: pointer; font-weight: 600; transition: background .15s; }
.ral-btnp:hover { background: var(--acc-dark); }

/* summary */
.ral-sum { background: transparent; border: 1px solid currentColor; border-radius: 14px; padding: 1.2rem; margin-bottom: 1.5rem; opacity: .8; }
.ral-sr { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid currentColor; font-size: 13px; gap: 12px; opacity: .75; }
.ral-sr:last-child { border: none; }
.ral-sk { opacity: .55; flex-shrink: 0; }
.ral-sv { font-weight: 600; text-align: right; }

/* send button */
.ral-sbtn { width: 100%; background: var(--acc); border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; transition: background .15s; }
.ral-sbtn:hover { background: var(--acc-dark); }
.ral-note { font-size: 12px; color: inherit; opacity: .4; text-align: center; margin-top: 10px; }

/* ok */
.ral-ok { font-size: 12px; color: var(--acc); background: var(--acc-bg); padding: 6px 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; }
.ral-ok-ico { width: 14px; height: 14px; stroke: var(--acc) !important; stroke-width: 5 !important; }

/* done */
.ral-done { text-align: center; padding: 3rem 1rem; }
.ral-done-ico { margin-bottom: 1.2rem; }
.ral-done-ico svg { width: 60px; height: 60px; stroke: var(--acc) !important; stroke-width: 2.5 !important; }
.ral-done h3 { font-size: 24px; font-weight: 700; color: inherit; margin-bottom: 10px; }
.ral-done p { font-size: 14px; color: inherit; opacity: .55; line-height: 1.6; white-space: pre-line; }