/* =========================================================
   RAZ CLOUD — SOURCE THEME CUSTOMIZER
   Does NOT control sidebar geometry
   ========================================================= */


/* ---------------------------------------------------------
   FLOATING LAUNCHER
   --------------------------------------------------------- */

.raz-theme-launcher {

    width: 42px;
    height: 42px;

    position: fixed;

    right: 18px;
    bottom: 18px;

    z-index: 1900;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        rgba(
            var(--raz-primary-rgb),
            .55
        );

    border-radius: 50%;

    background:
        var(--raz-primary);

    color: #fff;

    box-shadow:
        0 8px 28px
        rgba(
            var(--raz-primary-rgb),
            .28
        );

    cursor: pointer;

    font-size: 17px;

    line-height: 1;

    transition:
        transform var(--raz-transition),
        box-shadow var(--raz-transition);
}


.raz-theme-launcher:hover {

    transform:
        translateY(-2px)
        rotate(18deg);

    box-shadow:
        0 12px 34px
        rgba(
            var(--raz-primary-rgb),
            .36
        );
}


/* ---------------------------------------------------------
   OVERLAY
   --------------------------------------------------------- */

.raz-theme-overlay {

    position: fixed;
    inset: 0;

    z-index: 1950;

    display: none;

    background:
        rgba(3,10,18,.52);

    backdrop-filter:
        blur(2px);
}


.raz-theme-overlay.show {
    display: block;
}


/* ---------------------------------------------------------
   DRAWER
   --------------------------------------------------------- */

.raz-theme-drawer {

    width: 372px;
    max-width: 94vw;

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 2000;

    display: flex;
    flex-direction: column;

    transform:
        translateX(105%);

    border-left:
        1px solid
        var(--raz-border);

    background:
        var(--raz-surface);

    color:
        var(--raz-text);

    box-shadow:
        -18px 0 50px
        rgba(0,0,0,.35);

    transition:
        transform .22s ease;
}


.raz-theme-drawer.show {

    transform:
        translateX(0);
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.raz-theme-head {

    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        13px 15px;

    border-bottom:
        1px solid
        var(--raz-border);

    background:
        var(--raz-surface);
}


.raz-theme-head h3 {

    margin: 0;

    color:
        var(--raz-text);

    font-size: 14px;
}


.raz-theme-head p {

    margin:
        3px 0 0;

    color:
        var(--raz-muted);

    font-size: 8px;
}


.raz-theme-close {

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    padding: 0;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-muted);

    cursor: pointer;

    font-size: 17px;
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.raz-theme-scroll {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    padding:
        14px;
}


.raz-theme-group {

    margin-bottom:
        19px;
}


.raz-theme-group-title {

    margin:
        0 0 8px;

    color:
        var(--raz-muted-2);

    font-size: 7px;
    font-weight: 800;

    letter-spacing:
        1.15px;

    text-transform:
        uppercase;
}


/* ---------------------------------------------------------
   APPEARANCE BUTTONS
   --------------------------------------------------------- */

.raz-theme-mode-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 7px;
}


.raz-theme-mode {

    min-height: 46px;

    padding:
        7px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-muted);

    cursor: pointer;

    font-size: 8px;

    transition:
        border-color var(--raz-transition),
        color var(--raz-transition),
        background var(--raz-transition);
}


.raz-theme-mode:hover {

    color:
        var(--raz-text);
}


.raz-theme-mode.active {

    border-color:
        var(--raz-primary);

    color:
        var(--raz-primary);

    background:
        rgba(
            var(--raz-primary-rgb),
            .08
        );

    box-shadow:
        inset 0 0 0 1px
        var(--raz-primary);
}


/* ---------------------------------------------------------
   PRESETS
   --------------------------------------------------------- */

.raz-theme-presets {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 7px;
}


.raz-theme-preset {

    min-height: 60px;

    padding:
        9px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-text);

    text-align: left;

    cursor: pointer;

    transition:
        border-color var(--raz-transition),
        background var(--raz-transition);
}


.raz-theme-preset:hover {

    border-color:
        rgba(
            var(--raz-primary-rgb),
            .45
        );
}


.raz-theme-preset.active {

    border-color:
        var(--raz-primary);

    box-shadow:
        inset 0 0 0 1px
        var(--raz-primary);
}


.raz-theme-preset strong {

    display: block;

    font-size: 8px;
}


.raz-theme-preset small {

    display: block;

    margin-top: 3px;

    color:
        var(--raz-muted);

    font-size: 7px;
}


.raz-theme-swatches {

    display: flex;

    gap: 4px;

    margin-top: 7px;
}


.raz-theme-swatches i {

    width: 10px;
    height: 10px;

    display: block;

    border-radius: 50%;
}


/* ---------------------------------------------------------
   FIELD
   --------------------------------------------------------- */

.raz-theme-field {

    margin-bottom:
        11px;
}


.raz-theme-field label {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin:
        0 0 5px;

    color:
        var(--raz-muted);

    font-size: 8px;
}


.raz-theme-field select,
.raz-theme-field input[type="text"] {

    width: 100%;

    height: 36px;

    box-sizing:
        border-box;

    padding:
        0 9px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-text);

    outline: 0;

    font-size: 8px;
}


.raz-theme-field select:focus,
.raz-theme-field input[type="text"]:focus {

    border-color:
        var(--raz-primary);

    box-shadow:
        0 0 0 3px
        rgba(
            var(--raz-primary-rgb),
            .10
        );
}


/* ---------------------------------------------------------
   COLOR
   --------------------------------------------------------- */

.raz-theme-color {

    display: grid;

    grid-template-columns:
        46px 1fr;

    gap:
        7px;
}


.raz-theme-color
input[type="color"] {

    width: 46px;
    height: 36px;

    box-sizing:
        border-box;

    padding: 3px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface-2);

    cursor: pointer;
}


/* ---------------------------------------------------------
   RANGE
   --------------------------------------------------------- */

.raz-theme-range {

    width: 100%;

    accent-color:
        var(--raz-primary);

    cursor: pointer;
}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.raz-theme-footer {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    padding:
        12px 14px;

    border-top:
        1px solid
        var(--raz-border);

    background:
        var(--raz-surface);
}


.raz-theme-footer button {

    height: 36px;

    border-radius:
        var(--raz-radius);

    cursor: pointer;

    font-size: 8px;
    font-weight: 700;
}


.raz-theme-reset {

    border:
        1px solid
        var(--raz-border);

    background:
        var(--raz-surface-2);

    color:
        var(--raz-muted);
}


.raz-theme-done {

    border:
        1px solid
        var(--raz-primary);

    background:
        var(--raz-primary);

    color:
        #ffffff;
}


/* =========================================================
   SETTINGS INLINE PANEL
   ========================================================= */

.raz-theme-settings {

    margin-top:
        18px;

    border:
        1px solid
        var(--raz-border);

    border-radius:
        var(--raz-radius);

    background:
        var(--raz-surface);

    box-shadow:
        var(--raz-shadow);

    overflow:
        hidden;
}


.raz-theme-settings-head {

    min-height:
        58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        11px 14px;

    border-bottom:
        1px solid
        var(--raz-border);
}


.raz-theme-settings-head h2 {

    margin: 0;

    color:
        var(--raz-text);

    font-size:
        12px;
}


.raz-theme-settings-head p {

    margin:
        3px 0 0;

    color:
        var(--raz-muted);

    font-size:
        8px;
}


.raz-theme-settings-open {

    height:
        34px;

    padding:
        0 11px;

    border:
        1px solid
        var(--raz-primary);

    border-radius:
        var(--raz-radius);

    background:
        rgba(
            var(--raz-primary-rgb),
            .08
        );

    color:
        var(--raz-primary);

    cursor:
        pointer;

    font-size:
        8px;
}


.raz-theme-settings-body {

    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:
        14px;

    padding:
        14px;
}


.raz-theme-settings-column {

    min-width:
        0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:900px) {

    .raz-theme-settings-body {

        grid-template-columns:
            1fr;
    }

}


@media(max-width:600px) {

    .raz-theme-drawer {

        width:
            100%;
    }


    .raz-theme-launcher {

        right:
            12px;

        bottom:
            12px;
    }

}