@charset "utf-8";

/* =========================================================
   REDLINE CONFIGURATOR — front-end styles
   Mirrors the live grid-sidebar configurator at
   redline-campers.com/campervans-interior/ (see
   reference/redline-live-configurator/configurator-relevant.css for the
   source this was mirrored from) — same layout/branding, generalized so any
   number of admin-defined categories/options renders correctly, not just
   the original hardcoded 6.
========================================================= */

:root {
    --rc-red: #e42725;
    --rc-text: #252525;
    --rc-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.017),
        0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
        0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
        0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
        0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.043),
        0.5rem 1rem 6rem rgba(27, 40, 50, 0.06);
}

.rc-configurator {
    box-sizing: border-box;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    font-family: inherit;
}

.rc-configurator *,
.rc-configurator *::before,
.rc-configurator *::after {
    box-sizing: border-box;
}

.rc-config-window {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 11px;
}

/* =========================================================
   PREVIEW IMAGE / LAYER STACK
========================================================= */

/*
The background <img> stays in normal flow (width:100%, height:auto) so its
OWN intrinsic aspect ratio drives .rc-window's height — no hardcoded
aspect-ratio guess that can drift from the real image and stretch everything
inside it. Every overlay layer is then absolutely positioned to fill
whatever box that produces, so they track the background exactly at any
viewport width.
*/
.rc-window {
    position: relative;
    flex: 2 1 600px;
    max-width: 1200px;
    width: 100%;
}

.rc-bground-img {
    display: block;
    width: 100%;
    height: auto;
}

.rc-layer-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.rc-layer {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
Mirrors the live site's .fwrd/.fwrd2 classes: .rc-layer-wrap deliberately has
no z-index above (stacks by DOM/category order), so an element with an
explicit z-index here escapes that local order and paints above every
non-elevated wrap/layer — used for categories/options the live site forces
to the front (e.g. edge colour; specific matte kitchen finishes).
*/
.rc-elevated {
    z-index: 999;
}

.rc-light-shade-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 100;
    pointer-events: none;
}

@media screen and (max-width: 1023px) {
    .rc-window {
        flex-basis: 100%;
    }
}

/* =========================================================
   CONTROLLER SIDEBAR — one box per category, swatch grid
========================================================= */

.rc-controller-wrap {
    flex: 1 1 320px;
}

.rc-controller {
    width: 100%;
    background: #fff;
    border-top: 3px solid var(--rc-red);
    padding: 25px;
    margin: 10px 0 0 10px;
    position: relative;
    box-shadow: var(--rc-shadow);
}

.rc-controller:first-child {
    margin-top: 0;
}

@media screen and (max-width: 1023px) {
    .rc-controller {
        margin: 10px 0 0 0;
    }
}

.rc-controller h3 {
    width: calc(100% - 65px);
    margin: 0 0 15px;
    color: var(--rc-text);
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.3;
}

.rc-row-badge {
    position: absolute;
    right: 15px;
    top: 25px;
    z-index: 5;
    padding: 5px 15px;
    background: var(--rc-red);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.rc-swatch {
    float: left;
    display: block;
    width: 40px;
    height: 40px;
    margin: 0.4em;
    cursor: pointer;
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: var(--rc-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rc-swatch:hover {
    transform: scale(1.08);
}

.rc-swatch.active {
    box-shadow: 0 0 0 3px var(--rc-red), var(--rc-shadow);
}

/*
Flagged by the client as too easy to misclick on mobile (swatches sat only
0.2em apart). Larger touch target + more breathing room between tiles,
matching the ~44px minimum recommended tap-target size.
*/
@media screen and (max-width: 640px) {
    .rc-swatch {
        width: 44px;
        height: 44px;
        margin: 0.5em;
    }
}

.rc-controller::after {
    content: "";
    display: block;
    clear: both;
}

/* =========================================================
   SAVE / EMAIL CONFIGURATION AREA (Contact Form 7)
========================================================= */

.rc-configurator .save-configuration {
    width: 100%;
    margin: 25px 0;
    padding: 25px;
    background: #f7f7f7;
    box-shadow: var(--rc-shadow);
}

.rc-configurator .save-configuration h2 {
    margin: 0 0 15px;
    color: var(--rc-text);
    font-size: 1.35rem;
    text-align: center;
}

.rc-configurator .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* Hidden-field file input that JS attaches the html2canvas screenshot to. */
.rc-configurator .config-screenshot-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}