/* Container styling with the new skinning parameters */

/* Base container styling (applied to all whtbg class elements) */
.whtbg {
    border-width: var(--container-border-width);
}

/* Container background gradient when enabled */
body.container-gradient-enabled .whtbg {
    background-image: linear-gradient(to right, var(--secondary-background-color), var(--gradient-background-color));
    background-color: transparent; /* Ensure the gradient shows properly */
}

/* Transparent form controls when enabled */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]),
body.transparent-form-controls-enabled textarea,
body.transparent-form-controls-enabled select {
    background-color: transparent !important;
    border: 1px solid var(--primary-accent-color);
}

/* Add hover effect for transparent form controls */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]):hover,
body.transparent-form-controls-enabled textarea:hover,
body.transparent-form-controls-enabled select:hover {
    border-color: var(--secondary-accent-color);
}

/* Focus effect for transparent form controls */
body.transparent-form-controls-enabled input:not([type="checkbox"]):not([type="radio"]):focus,
body.transparent-form-controls-enabled textarea:focus,
body.transparent-form-controls-enabled select:focus {
    outline: none;
    border-color: var(--secondary-accent-color);
    box-shadow: 0 0 5px rgba(var(--secondary-accent-color), 0.5);
}