/**
 * Bali Green Spa - Forminator Treatment Form Styles
 * Simplified styling to match treatment booking buttons
 *
 * @package Bali Green Spa
 * @since 2.0.0
 */

/* ===========================================
   HIDE HONEYPOT AND UNWANTED ELEMENTS
   =========================================== */

#forminator-module-2990 {
    margin: 0;
}

/* Hide honeypot field */
.forminator-ui .forminator-field[style*="display: none"],
.forminator-ui .forminator-field.forminator-hidden,
.forminator-ui .forminator-honeypot {
    display: none !important;
}

/* Hide error messages initially (will be shown by validation JS) */
.forminator-ui .forminator-error:not(.treatment-category-error) {
    display: none !important;
}

/* Remove form container border and shadow */
.forminator-ui.forminator-custom-form {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ===========================================
   FORM FIELDS - MATCHING THEME
   =========================================== */

/* All form inputs with border-radius */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="date"],
.forminator-ui input[type="time"],
.forminator-ui textarea,
.forminator-ui select {
    border-radius: 8px !important;
    border: 2px solid #e8f5e8 !important;
    background: #ffffff !important;
    color: #2d5016 !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

/* GREEN focus borders - not blue */
.forminator-ui input[type="text"]:focus,
.forminator-ui input[type="email"]:focus,
.forminator-ui input[type="tel"]:focus,
.forminator-ui input[type="date"]:focus,
.forminator-ui input[type="time"]:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
    border-color: #4a7c59 !important;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1) !important;
    outline: none !important;
}

/* Select dropdown with green arrow */
.forminator-ui select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7c59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1rem !important;
    padding-right: 3rem !important;
    appearance: none !important;
}

/* ===========================================
   SELECT2 DROPDOWN STYLING
   =========================================== */

/* Select2 container */
.forminator-ui .select2-container {
    width: 100% !important;
}

/* Select2 selection box (the main visible part) */
.forminator-ui .select2-container--default .select2-selection--single {
    border-radius: 8px !important;
    border: 2px solid #e8f5e8 !important;
    background: #ffffff !important;
    color: #2d5016 !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    height: auto !important;
    min-height: 44px !important;
    transition: all 0.3s ease !important;
}

/* Select2 rendered text inside selection */
.forminator-ui .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #2d5016 !important;
    line-height: 28px !important;
    padding: 0 !important;
}

/* Select2 arrow */
.forminator-ui .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 8px !important;
}

.forminator-ui .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #4a7c59 transparent transparent transparent !important;
    border-width: 6px 6px 0 6px !important;
}

/* Select2 focus state - GREEN not blue */
.forminator-ui .select2-container--default.select2-container--focus .select2-selection--single,
.forminator-ui .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4a7c59 !important;
    box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.1) !important;
    outline: none !important;
}

/* Select2 dropdown */
.select2-container--default .select2-dropdown,
.forminator-ui#forminator-module-2990.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--multiple[role="combobox"] {
    border-radius: 8px !important;
    background: #ffffff !important;
    margin-top: 4px !important;
}

.forminator-ui#forminator-module-2990.forminator-design--default .forminator-select2 + .forminator-select .selection .select2-selection--multiple[role="combobox"]:focus {
    border: 1px solid #4a7c59 !important;
}

.forminator-ui#forminator-module-2990.forminator-design--default .forminator-select2 + .forminator-select.select2-container--open .selection .select2-selection--multiple[role="combobox"] .select2-selection__arrow:focus {
    color: #4a7c59 !important;
}

/* Select2 search box inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e8f5e8 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #4a7c59 !important;
    outline: none !important;
}

/* Select2 options */
.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    color: #2d5016 !important;
    font-size: 16px !important;
}

/* Select2 option hover */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #e8f5e8 !important;
    color: #2d5016 !important;
}

/* Select2 selected option */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #4a7c59 !important;
    color: white !important;
}

/* Select2 category headers (value="0") */
.select2-container--default .select2-results__option[data-select2-id*='"0"'] {
    font-weight: bold !important;
    color: #4a7c59 !important;
    background: #e8f5e8 !important;
    font-style: italic !important;
    cursor: not-allowed !important;
}

/* Select2 placeholder */
.forminator-ui .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Category headers styling */
.forminator-ui select option[value="0"] {
    font-weight: bold !important;
    color: #4a7c59 !important;
    background: #e8f5e8 !important;
    font-style: italic !important;
}

/* Form labels */
.forminator-ui .forminator-label,
.forminator-ui label {
    color: #2d5016 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ===========================================
   SUBMIT BUTTON - EXACTLY LIKE TREATMENT BOOKING BUTTON
   =========================================== */

/* Match .bali-treatment-link styling exactly */
.forminator-ui .forminator-button-submit,
.forminator-ui button[type="submit"],
.forminator-ui input[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    background: linear-gradient(45deg, #4a7c59, #2d5016) !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
    width: auto !important;
    justify-content: center !important;
}

.forminator-ui .forminator-button-submit:hover,
.forminator-ui button[type="submit"]:hover,
.forminator-ui input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 124, 89, 0.3) !important;
    color: white !important;
}

/* ===========================================
   CUSTOM VALIDATION ERROR STYLING
   =========================================== */

/* Our custom treatment category error */
.treatment-category-error {
    color: #dc3232 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    display: block !important;
    background: rgba(220, 50, 50, 0.1) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-left: 3px solid #dc3232 !important;
    animation: fadeIn 0.3s ease-in !important;
}

/* Error field styling */
.forminator-has-error {
    border-color: #dc3232 !important;
    box-shadow: 0 0 2px rgba(220, 50, 50, 0.8) !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   MOBILE RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    .forminator-ui input[type="text"],
    .forminator-ui input[type="email"],
    .forminator-ui input[type="tel"],
    .forminator-ui input[type="date"],
    .forminator-ui input[type="time"],
    .forminator-ui textarea,
    .forminator-ui select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}