/* Checkbox Fix - Bootstrap override for square checkboxes */

/* Reset Bootstrap checkbox styles */
.form-check-input,
input[type="checkbox"].form-check-input,
input[type="radio"].form-check-input {
    /* Size - Kare ve sabit boyut */
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    
    /* Reset appearance */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Styling */
    background-color: #ffffff !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

/* Radio buttons should be round */
input[type="radio"].form-check-input {
    border-radius: 50% !important;
}

/* Hover state */
.form-check-input:hover:not(:disabled):not(:checked) {
    border-color: #FFB700 !important;
    background-color: #FFFBF0 !important;
}

/* Checked state */
.form-check-input:checked,
input[type="checkbox"].form-check-input:checked {
    background-color: #FFB700 !important;
    border-color: #FFB700 !important;
}

/* Checkbox checkmark */
input[type="checkbox"].form-check-input:checked::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='white' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Radio button dot */
input[type="radio"].form-check-input:checked::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: white !important;
    background-image: none !important;
}

/* Focus state */
.form-check-input:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 183, 0, 0.25) !important;
    border-color: #FFB700 !important;
}

/* Disabled state */
.form-check-input:disabled,
.form-check-input[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #e9ecef !important;
}

/* Form check container */
.form-check {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 0.75rem !important;
    min-height: 1.5rem !important;
    padding-left: 0 !important;
}

/* Form check inline */
.form-check-inline {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 1rem !important;
}

/* Label styling */
.form-check-label {
    margin-left: 0.5rem !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Fix for input group with checkbox */
.input-group .form-check-input {
    margin-top: 0 !important;
}

/* Fix alignment in different contexts */
.form-check-input {
    margin-top: 0.125rem !important;
    margin-right: 0.5rem !important;
}

/* Remove any transform that might distort the checkbox */
.form-check-input,
.form-check-input::before,
.form-check-input::after {
    transform-origin: center !important;
}

/* Ensure checkbox doesn't stretch */
.form-check-input {
    align-self: flex-start !important;
}

/* Fix for mobile */
@media (max-width: 576px) {
    .form-check-input,
    input[type="checkbox"].form-check-input {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    
    input[type="checkbox"].form-check-input:checked::before {
        width: 12px !important;
        height: 12px !important;
    }
}