/**
 * Form controls: buttons, inputs, sliders, checkboxes
 */

/* Text Inputs */
.control-item input[type="number"] {
    width: 100%;
    padding: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-input);
    font-size: 14px;
}

.control-item input[type="number"]:focus {
    outline: none;
    border-color: var(--border-focus);
}

/* Range Sliders */
.control-item input[type="range"] {
    width: 100%;
    margin-bottom: 5px;
}

/* Buttons */
button {
    flex: 1;
    padding: 10px;
    background: var(--accent-primary);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: var(--accent-hover);
}

button:active {
    background: var(--accent-active);
}

button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

button.active {
    background: var(--accent-secondary);
}

button.active:hover {
    background: #e65b25;
}

/* Button Groups */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.button-group button {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-button);
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    color: var(--text-button);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px var(--shadow-medium);
    white-space: nowrap;
}

.button-group button:hover {
    background: var(--bg-button-hover);
    border-color: var(--border-hover);
    color: var(--text-button-hover);
    box-shadow: 0 2px 6px var(--shadow-medium);
}

.button-group button:active {
    background: var(--bg-button-active);
    transform: translateY(1px);
    box-shadow: 0 1px 2px var(--shadow-medium);
}

/* Media Controls */
.media-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.media-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--shadow-medium);
}

.media-btn.primary {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--gradient-primary-start) 0%, var(--gradient-primary-end) 100%);
}

.media-btn.primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #5aaaff 0%, #4a8eef 100%);
    transform: scale(1.05);
}

.media-btn.primary:active:not(:disabled) {
    transform: scale(0.98);
}

.media-btn.secondary {
    background: linear-gradient(135deg, var(--gradient-secondary-start) 0%, var(--gradient-secondary-end) 100%);
}

.media-btn.secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #666666 0%, #555555 100%);
    transform: scale(1.05);
}

body[data-theme="light"] .media-btn.secondary:hover:not(:disabled) {
    background: linear-gradient(135deg, #d0d0d0 0%, #c0c0c0 100%);
}

.media-btn.secondary:active:not(:disabled) {
    transform: scale(0.98);
}

.media-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: 0 1px 4px var(--shadow-light);
}

.media-btn .icon {
    width: 24px;
    height: 24px;
    fill: white;
    transition: transform 0.2s ease;
}

.media-btn .icon.hidden {
    display: none;
}

/* Timeline Controls */
.timeline-container {
    margin-top: 15px;
    padding: 14px;
    background: var(--bg-timeline);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.slider-group {
    margin-bottom: 14px;
}

.slider-group:last-child {
    margin-bottom: 0;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.slider-value {
    color: var(--accent-primary);
    font-weight: 600;
    font-size: 14px;
}

#current-step {
    color: var(--accent-primary);
}

#total-steps {
    color: var(--text-muted);
}

.separator {
    color: var(--text-disabled);
    margin: 0 3px;
}

.timeline-scrubber {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.timeline-scrubber:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Webkit (Chrome, Safari, Edge) */
.timeline-scrubber::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--bg-primary);
    border-radius: 2px;
    border: 1px solid var(--border-primary);
}

.timeline-scrubber::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    position: relative;
    z-index: 10;
}

.timeline-scrubber:not(:disabled)::-webkit-slider-thumb:hover {
    background: var(--accent-primary);
}

.timeline-scrubber::-webkit-slider-thumb:active {
    cursor: grabbing;
}

/* Firefox */
.timeline-scrubber::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--bg-primary);
    border-radius: 2px;
    border: 1px solid var(--border-primary);
}

.timeline-scrubber::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.timeline-scrubber:not(:disabled)::-moz-range-thumb:hover {
    background: var(--accent-primary);
}

.timeline-scrubber::-moz-range-thumb:active {
    cursor: grabbing;
}

/* Progress fill for Firefox */
.timeline-scrubber::-moz-range-progress {
    height: 4px;
    background: var(--accent-primary);
    border-radius: 2px;
}

/* Checkboxes */
input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}