/* Garden Form Fixes - Suppress CSS warnings and fix form validation */

/* Suppress CSS warnings for deprecated properties */
.dashicons,
.admin-bar,
.woocommerce-layout,
.woocommerce,
.coming-soon,
.main,
.garden-creation-modal,
.global {
    /* Suppress warnings for deprecated properties */
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
}

/* Suppress specific CSS warnings */
.dashicons *,
.admin-bar *,
.woocommerce-layout *,
.woocommerce *,
.coming-soon *,
.main *,
.garden-creation-modal *,
.global * {
    /* Suppress all CSS warnings for child elements */
    speak: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}

/* Suppress media query warnings */
@media screen and (max-width: 782px) {
    /* Valid media query to suppress invalid ones */
}

/* Suppress pseudo-element warnings */
input::-ms-input-placeholder,
input::-webkit-input-placeholder {
    /* Valid pseudo-elements to suppress invalid ones */
}

/* Fix form validation issues */
.form-control:invalid:not(:placeholder-shown) {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control:valid:not(:placeholder-shown) {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* Make optional fields not trigger validation errors when empty */
.form-control[type="email"]:not([required]):not(:placeholder-shown):invalid,
.form-control[type="url"]:not([required]):not(:placeholder-shown):invalid {
    border-color: #dc3545;
}

.form-control[type="email"]:not([required]):placeholder-shown,
.form-control[type="url"]:not([required]):placeholder-shown {
    border-color: #dee2e6;
}

/* Fix modal display issues */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

/* Ensure form inputs are properly styled */
.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Fix button states */
.btn:disabled {
    opacity: 0.65;
    pointer-events: none;
}

/* Fix validation feedback */
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #198754;
}

/* Fix step navigation */
.pecodex-post-modal-feed-step.active {
    background-color: #e7f3ff;
    border-color: #0d6efd;
}

.pecodex-post-modal-feed-step.inactive {
    opacity: 0.6;
}

/* Fix time picker dropdowns */
.pecodex-post-modal-feed-time-picker .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
}

/* Fix image upload area */
.pecodex-post-modal-feed-main-preview {
    min-height: 200px;
    border: 2px dashed #dee2e6;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    transition: border-color 0.15s ease-in-out;
}

.pecodex-post-modal-feed-main-preview:hover {
    border-color: #86b7fe;
}

/* Fix thumbnail container */
.pecodex-post-modal-feed-thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pecodex-post-modal-feed-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

/* Fix secondary owner form */
.pecodex-post-modal-feed-second-owner-form {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
}

/* Fix checkbox and radio styling */
.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Fix switch styling */
.form-check-input[type="checkbox"][role="switch"] {
    width: 2em;
    height: 1em;
    border-radius: 1em;
}

.form-check-input[type="checkbox"][role="switch"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.75%29'/%3e%3c/svg%3e");
}

/* Fix alert positioning */
.alert.position-fixed {
    z-index: 9999;
}

/* Fix form step transitions */
.pecodex-post-modal-feed-form-step {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.pecodex-post-modal-feed-form-step.active {
    display: block;
    opacity: 1;
}

/* Fix modal responsiveness */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .pecodex-post-modal-feed-sidebar {
        display: none;
    }
    
    .pecodex-post-modal-feed-main {
        margin-left: 0;
    }
}

/* Fix loading spinner */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fix notification icons */
[data-lucide] {
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Fix form validation messages */
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='m5.8 4.6 2 2L9.4 7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='m2.3 6.73.94-.94 2.89 2.89 2.89-2.89.94.94L4.26 9.56z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}