/* assets/css/demo-styles.css */

/* Styles for the direction chart */
.direction-chart {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.direction-bar {
    width: 40px;
    background-color: #06e78f;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 5px;
    position: relative;
}
.direction-label {
    position: absolute;
    bottom: -25px;
    font-size: 10px;
    text-align: center;
    transform: rotate(-45deg);
    white-space: nowrap;
}
.direction-count {
    font-size: 10px;
    text-align: center;
}

/* Styles for the weighted bar chart */
.weighted-bar-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 300px;
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
}
.weighted-bar {
    background-color: #06e78f;
    width: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    margin: 0 5px;
}
.weighted-value, .weighted-count, .weighted-probabilities {
    font-size: 12px;
    text-align: center;
}
.weighted-probabilities {
    position: absolute;
    bottom: -40px;
    white-space: nowrap;
    transform: rotate(-45deg);
    transform-origin: left top;
}


/* assets/css/demo-styles.css */

/* Existing styles from dice-roll-demo.css */
.getrng-theme-dice-roll-form,
.getrng-theme-random-number-form {
    margin-bottom: 20px;
}

.getrng-theme-dice-roll-form button,
.getrng-theme-random-number-form button {
    margin-top: 15px;
}

.list-group-item {
    border-color: var(--bs-link-color);
}

.list-group-item small {
    display: block;
    margin-top: 5px;
}

.selected-item-name {
    font-size: 1.25em;
    font-weight: bold;
}

.dice-breakdown,
.random-number-details {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.dice-probability {
    font-style: italic;
    color: var(--bs-secondary);
}

.dice-probability,
.random-number-details {
    list-style-type: none;
    padding: 0;
}

.dice-probability li,
.random-number-details li {
    margin-bottom: 5px;
}

.dice-probability label,
.random-number-details label {
    font-weight: bold;
    margin-right: 5px;
}

.probability-comparison {
    font-weight: bold;
}

.very-low-probability { color: #ff4136; }  /* Red */
.low-probability { color: #ff851b; }       /* Orange */
.average-probability { color: #ffdc00; }   /* Yellow */
.high-probability { color: #2ecc40; }      /* Green */
.very-high-probability { color: #0074d9; } /* Blue */

/* New styles for Random Number demo */
.getrng-theme-mode-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.getrng-theme-mode-chips input[type="checkbox"] {
    display: none;
}

.getrng-theme-mode-chips label {
    padding: 5px 10px;
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.getrng-theme-mode-chips input[type="checkbox"]:checked + label {
    background-color: var(--bs-link-color);
    color: var(--bs-dark);
}

.form-label {
    color: var(--bs-link-color);
}

.form-control {
    background-color: var(--bs-dark);
    color: var(--bs-link-color);
    border-color: var(--bs-link-color);
}

.form-control:focus {
    background-color: var(--bs-dark);
    color: var(--bs-link-color);
    border-color: var(--bs-link-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-link-color-rgb), 0.25);
}

/* Range slider styles */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: var(--bs-secondary);
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-link-color);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bs-link-color);
    cursor: pointer;
}