/**
 * Responsive Forms and Inputs
 * بهینه‌سازی فرم‌ها و ورودی‌ها
 */

/* ====================================
   Search Box - Hero Section
   ==================================== */
.hero-search-container {
    padding: clamp(16px, 3vw, 28px);
}

.hero-search-input {
    padding: clamp(10px, 2vw, 12px) !important;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* موبایل - Search Box */
@media (max-width: 767px) {
    .hero-search-container {
        width: 100%;
        padding: 16px;
    }
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-search-container {
        padding: clamp(18px, 2.5vw, 24px);
    }
}

/* ====================================
   Gravity Forms - Responsive
   ==================================== */

/* Input Fields */
.ginput_container input,
.ginput_container select,
.ginput_container textarea {
    padding: clamp(12px, 2vw, 16px) !important;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* Form Fields Gap */
.gform_wrapper.gravity-theme .gform_fields {
    gap: clamp(24px, 4vw, 40px) !important;
}

/* Submit Button */
.gform_footer .gform_button {
    padding: clamp(12px, 2vw, 15px) clamp(20px, 3vw, 30px) !important;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* Responsive Button Width */
@media (max-width: 767px) {
    .gform_footer {
        width: 100% !important;
        min-width: auto !important;
    }
    
    .gform_footer .gform_button {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gform_footer {
        min-width: 160px;
        width: auto;
    }
}

/* ====================================
   Search Inputs (Header & Mobile)
   ==================================== */
#search,
#search-mobile {
    padding: clamp(10px, 2vw, 12px) !important;
    padding-left: clamp(40px, 6vw, 50px) !important;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* Search Results Dropdown */
#search-content,
#search-mobile-content {
    padding: clamp(16px, 3vw, 24px);
    max-height: clamp(150px, 30vh, 250px);
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

.search-items ul li a h3 {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important;
}

/* ====================================
   Form Validation Messages
   ==================================== */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
    margin-top: clamp(8px, 1.5vw, 10px) !important;
    font-size: clamp(0.75rem, 1.25vw, 0.875rem) !important;
}

/* ====================================
   Textarea - Responsive Height
   ==================================== */
.ginput_container textarea {
    min-height: clamp(100px, 20vh, 150px) !important;
    resize: vertical;
}

/* ====================================
   Select Dropdown
   ==================================== */
.ginput_container select {
    height: clamp(40px, 8vh, 52px) !important;
    padding-right: clamp(32px, 5vw, 40px) !important;
}

/* ====================================
   Checkbox & Radio Buttons
   ==================================== */
.ginput_container_checkbox li,
.ginput_container_radio li {
    margin-bottom: clamp(8px, 1.5vw, 12px);
}

.ginput_container_checkbox input[type="checkbox"],
.ginput_container_radio input[type="radio"] {
    width: clamp(16px, 3vw, 20px) !important;
    height: clamp(16px, 3vw, 20px) !important;
}

.ginput_container_checkbox label,
.ginput_container_radio label {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    padding-right: clamp(6px, 1vw, 8px);
}

/* ====================================
   Date Picker
   ==================================== */
.ginput_container_date input {
    padding-left: clamp(40px, 6vw, 50px) !important;
}

.ui-datepicker-trigger {
    left: clamp(12px, 2vw, 16px) !important;
    width: clamp(20px, 3vw, 24px) !important;
    height: clamp(20px, 3vw, 24px) !important;
}

/* ====================================
   Form Container Padding
   ==================================== */
.gform_wrapper {
    padding: clamp(16px, 3vw, 24px);
}

@media (max-width: 767px) {
    .gform_wrapper {
        padding: clamp(12px, 2vw, 16px);
    }
}

/* ====================================
   Gradient Border - Responsive
   ==================================== */
.gradient-border {
    padding: clamp(16px, 3vw, 28px);
}

.gradient-border.gbs-1 {
    padding: clamp(1px, 0.2vw, 2px);
}

.gradient-border.gbs-2 {
    padding: clamp(16px, 3vw, 28px);
}

.gradient-border.gbs-3 {
    padding: clamp(20px, 4vw, 40px);
}

/* ====================================
   Input Focus States - Better Touch
   ==================================== */
.ginput_container input:focus,
.ginput_container select:focus,
.ginput_container textarea:focus,
#search:focus,
#search-mobile:focus {
    outline: none;
    border: 2px solid #64748b !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1);
}

/* Touch devices - larger tap targets */
@media (hover: none) and (pointer: coarse) {
    .ginput_container input,
    .ginput_container select,
    .ginput_container textarea,
    .gform_footer .gform_button {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    .ginput_container_checkbox input[type="checkbox"],
    .ginput_container_radio input[type="radio"] {
        min-width: 24px !important;
        min-height: 24px !important;
    }
}

/* ====================================
   Reserve Form - Specific
   ==================================== */
.reserve-form .gform_wrapper {
    max-width: clamp(320px, 95vw, 800px);
    margin: 0 auto;
}

@media (max-width: 767px) {
    .reserve-form .gform_fields {
        grid-template-columns: 1fr !important;
    }
}

/* ====================================
   Contact Form - Specific
   ==================================== */
.contact-form .gform_wrapper {
    max-width: clamp(320px, 95vw, 600px);
}

/* ====================================
   Form Success Message
   ==================================== */
.gform_confirmation_wrapper {
    padding: clamp(20px, 4vw, 30px);
    margin: clamp(20px, 4vw, 30px) auto;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* ====================================
   File Upload Button
   ==================================== */
input[type="file"] {
    padding: clamp(8px, 1.5vw, 12px) !important;
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}

/* ====================================
   Placeholder Text
   ==================================== */
::placeholder {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    opacity: 0.6;
}

/* ====================================
   Form Labels
   ==================================== */
.gfield_label {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    margin-bottom: clamp(6px, 1vw, 8px) !important;
}

/* ====================================
   Autocomplete Dropdown
   ==================================== */
.autocomplete-suggestions {
    max-height: clamp(150px, 30vh, 250px);
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
}