/* ========================================
   BoxStory Brand Kit - Form Controls
   Clean, modern form styling with light backgrounds
   ======================================== */

/* ========================================
   1. BASE FORM CONTROLS
   ======================================== */

/* Text Inputs, Textareas, Select Dropdowns */
.form-control,
.form-select {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    color: #2c3e50 !important;
    transition: all 0.3s ease !important;
}

.form-control:focus,
.form-select:focus {
    background-color: #ffffff !important;
    border-color: #66c7be !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #95a5a6 !important;
    font-size: 14px !important;
}

/* Textarea specific */
textarea.form-control {
    resize: vertical !important;
    min-height: 120px !important;
}

/* ========================================
   2. SELECT DROPDOWNS
   ======================================== */

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23667eea' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

.form-select:hover {
    border-color: #66c7be !important;
}

/* Select dropdown options */
.form-select option {
    padding: 10px !important;
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}

.form-select option:hover,
.form-select option:checked {
    background-color: #f0f3ff !important;
}

/* ========================================
   3. CHECKBOXES
   ======================================== */

.form-check-input {
    width: 20px !important;
    height: 20px !important;
    background-color: #f8f9fa !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.form-check-input:hover {
    border-color: #66c7be !important;
}

.form-check-input:checked {
    background-color: #66c7be !important;
    border-color: #66c7be !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    border-color: #66c7be !important;
}

.form-check-label {
    margin-left: 8px !important;
    cursor: pointer !important;
    color: #2c3e50 !important;
    font-size: 15px !important;
}

/* ========================================
   4. RADIO BUTTONS
   ======================================== */

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e") !important;
}

/* ========================================
   5. FILE INPUT
   ======================================== */

.form-control[type="file"] {
    padding: 10px 16px !important;
    cursor: pointer !important;
}

.form-control[type="file"]::file-selector-button {
    padding: 8px 20px !important;
    margin-right: 16px !important;
    background-color: #66c7be !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.form-control[type="file"]::file-selector-button:hover {
    background-color: #5568d3 !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   6. DATE & TIME PICKERS
   ======================================== */

.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23667eea' viewBox='0 0 16 16'%3e%3cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator,
.form-control[type="time"]::-webkit-calendar-picker-indicator,
.form-control[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    opacity: 0 !important;
    position: absolute !important;
    right: 12px !important;
    width: 20px !important;
    height: 20px !important;
}

/* ========================================
   7. TOGGLE SWITCHES
   ======================================== */

.form-switch .form-check-input {
    width: 48px !important;
    height: 24px !important;
    background-color: #d0d0d0 !important;
    border: none !important;
    border-radius: 24px !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.form-switch .form-check-input:checked {
    background-color: #66c7be !important;
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}

.form-switch .form-check-input::before {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 18px !important;
    background-color: white !important;
    border-radius: 50% !important;
    top: 3px !important;
    left: 3px !important;
    transition: all 0.3s ease !important;
}

.form-switch .form-check-input:checked::before {
    transform: translateX(24px) !important;
}

/* ========================================
   8. RANGE SLIDERS
   ======================================== */

.form-range {
    height: 6px !important;
    background-color: #f8f9fa !important;
    border-radius: 3px !important;
    outline: none !important;
}

.form-range::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    background-color: #66c7be !important;
    border: 3px solid white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

.form-range::-webkit-slider-thumb:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
}

.form-range::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    background-color: #66c7be !important;
    border: 3px solid white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   9. FORM LABELS
   ======================================== */

.form-label {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
}

/* Small help text under inputs */
.form-text {
    font-size: 13px !important;
    color: #7f8c8d !important;
    margin-top: 6px !important;
    line-height: 1.5 !important;
}

/* ========================================
   10. INPUT GROUPS (with icons/buttons)
   ======================================== */

.input-group .form-control,
.input-group .form-select {
    border-radius: 0 !important;
}

.input-group .form-control:first-child,
.input-group .form-select:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group .form-control:last-child,
.input-group .form-select:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    color: #66c7be !important;
    padding: 12px 16px !important;
    font-weight: 500 !important;
}

/* ========================================
   11. VALIDATION STATES
   ======================================== */

/* Valid state */
.form-control.is-valid,
.form-select.is-valid {
    border-color: #27ae60 !important;
    background-color: #f0fff4 !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1) !important;
}

.valid-feedback {
    color: #27ae60 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* Invalid state */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #e74c3c !important;
    background-color: #fff5f5 !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

.invalid-feedback,
.text-danger {
    color: #e74c3c !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* ========================================
   12. DISABLED STATE
   ======================================== */

.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
    background-color: #ecf0f1 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.form-check-input:disabled ~ .form-check-label {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* ========================================
   13. RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .form-control,
    .form-select {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    .form-check-input {
        width: 18px !important;
        height: 18px !important;
    }

    .form-switch .form-check-input {
        width: 42px !important;
        height: 22px !important;
    }
}

/* ========================================
   14. FLOATING LABELS (Optional)
   ======================================== */

.form-floating > .form-control,
.form-floating > .form-select {
    padding: 16px 16px !important;
}

.form-floating > label {
    padding: 16px 16px !important;
    color: #95a5a6 !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: #66c7be !important;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* ========================================
   15. CUSTOM ENHANCEMENTS
   ======================================== */

/* Search input with icon */
.form-control.search-input {
    padding-left: 40px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2395a5a6' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}

/* Number input controls */
.form-control[type="number"] {
    -moz-appearance: textfield !important;
}

.form-control[type="number"]::-webkit-outer-spin-button,
.form-control[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ========================================
   16. FORM SECTIONS & CARDS
   ======================================== */

.form-section {
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

.form-section-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f8f9fa !important;
}

/* ========================================
   17. CHARACTER COUNTER
   ======================================== */

.char-counter {
    font-size: 13px !important;
    color: #7f8c8d !important;
    margin-top: 6px !important;
    text-align: right !important;
}

.char-counter.text-warning {
    color: #f39c12 !important;
}

.char-counter.text-danger {
    color: #e74c3c !important;
}

/* ========================================
   18. BUTTON STYLES (Form Actions)
   ======================================== */

.btn {
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

.btn-primary {
    background-color: #66c7be !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: #5568d3 !important;
}

.btn-secondary {
    background-color: #95a5a6 !important;
    color: white !important;
}

.btn-success {
    background-color: #27ae60 !important;
    color: white !important;
}

.btn-danger {
    background-color: #e74c3c !important;
    color: white !important;
}

.btn-outline-primary {
    border: 2px solid #66c7be !important;
    color: #66c7be !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: #66c7be !important;
    color: white !important;
}

/* ========================================
   19. UTILITY CLASSES
   ======================================== */

.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 32px !important; }

.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 32px !important; }

/* ========================================
   END OF BRAND KIT
   ======================================== */