/**
 * Formidable Forms - Universal Styling
 *
 * Shared styles for all Formidable Forms across the site.
 * Includes select input styling, placeholder handling, etc.
 */

/* ============================================
   SELECT INPUT STYLING
   Universal styling for all select dropdowns
   ============================================ */

/* Base select styling with custom arrow - accent-1 color (#b72727) */
.frm_forms select,
.newsletter-modal-content select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 3rem 1rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    cursor: pointer !important;

    /* Remove default arrow */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* Custom arrow and background combined */
    background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b72727' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
    background-size: 1.25rem !important;
}

/* Select focus state - keep the arrow visible */
.frm_forms select:focus,
.newsletter-modal-content select:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--accent-2) !important;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b72727' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center !important;
    background-size: 1.25rem !important;
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1) !important;
}

/* Select hover state */
.frm_forms select:hover,
.newsletter-modal-content select:hover {
    border-color: #cbd5e1 !important;
}

/* Invalid select styling */
.frm_forms select[aria-invalid="true"],
.newsletter-modal-content select[aria-invalid="true"] {
    border-color: var(--wp--preset--color--accent-2) !important;
    background-color: rgba(197, 48, 48, 0.05) !important;
}

/* Placeholder option styling - the empty first option */
.frm_forms select option[value=""],
.frm_forms select option.frm-select-placeholder,
.newsletter-modal-content select option[value=""],
.newsletter-modal-content select option.frm-select-placeholder {
    color: #9DA3AF !important;
}

/* Select showing placeholder state - gray text when empty option is selected */
/* Using #9DA3AF to match input placeholders - override any inline styles */
.frm_forms select.frm-placeholder,
.newsletter-modal-content select.frm-placeholder {
    color: #9DA3AF !important;
    -webkit-text-fill-color: #9DA3AF !important;
}

/* Once a valid option is selected, show normal color */
.frm_forms select:not(.frm-placeholder),
.newsletter-modal-content select:not(.frm-placeholder) {
    color: var(--wp--preset--color--contrast, #1f2937) !important;
}

/* Option styling within select dropdown */
.frm_forms select option:not([value=""]):not(.frm-select-placeholder),
.newsletter-modal-content select option:not([value=""]):not(.frm-select-placeholder) {
    color: var(--wp--preset--color--contrast, #1f2937) !important;
    padding: 0.5rem !important;
}

/* ============================================
   UNIVERSAL PLACEHOLDER STYLING
   ============================================ */

/* Placeholder styling for all input types */
.frm_forms input::placeholder,
.newsletter-modal-content input::placeholder {
    color: #9DA3AF !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

.frm_forms input::-webkit-input-placeholder,
.newsletter-modal-content input::-webkit-input-placeholder {
    color: #9DA3AF !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

.frm_forms input::-moz-placeholder,
.newsletter-modal-content input::-moz-placeholder {
    color: #9DA3AF !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

.frm_forms input:-ms-input-placeholder,
.newsletter-modal-content input:-ms-input-placeholder {
    color: #9DA3AF !important;
    opacity: 1 !important;
    font-size: 1rem !important;
    font-family: inherit !important;
}

/* ============================================
   FORM FIELD CONTAINER ADJUSTMENTS
   ============================================ */

/* Ensure select fields in form containers have proper spacing */
.frm_forms .frm_form_field select,
.newsletter-modal-content .frm_form_field select {
    margin-top: 0 !important;
}

/* ============================================
   OVERRIDE FORMIDABLE FLOATING LABEL BEHAVIOR
   Force select placeholder text to always show
   ============================================ */

/* Override inside container and float label styles for selects */
/* Using #9DA3AF to match input placeholders */
.frm_forms .frm_inside_container select,
.frm_forms .frm_label_float_top select,
.newsletter-modal-content .frm_inside_container select,
.newsletter-modal-content .frm_label_float_top select {
    color: #9DA3AF !important;
    -webkit-text-fill-color: #9DA3AF !important;
    opacity: 1 !important;
}

/* When a real value is selected, use dark text */
.frm_forms .frm_inside_container select:not(.frm-placeholder),
.frm_forms .frm_label_float_top select:not(.frm-placeholder),
.newsletter-modal-content .frm_inside_container select:not(.frm-placeholder),
.newsletter-modal-content .frm_label_float_top select:not(.frm-placeholder) {
    color: var(--wp--preset--color--contrast, #1f2937) !important;
}

/* Ensure the select text is never transparent */
.frm_forms select,
.newsletter-modal-content select {
    -webkit-text-fill-color: currentColor !important;
    text-indent: 0 !important;
    opacity: 1 !important;
}

/* ============================================
   UNIVERSAL CHECKBOX STYLING
   Card-style checkboxes for all Formidable forms
   ============================================ */

/* Each checkbox item styled as a card */
.frm_forms .frm_checkbox label,
.newsletter-modal-content .frm_checkbox label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    padding: 1rem 1rem !important;
    background: #f9fafb !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: #9DA3AF !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.frm_forms .frm_checkbox label:hover,
.newsletter-modal-content .frm_checkbox label:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}

/* Custom checkbox input */
.frm_forms .frm_checkbox input[type="checkbox"],
.newsletter-modal-content .frm_checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    min-width: 1.5rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.25rem !important;
    background: white !important;
    cursor: pointer !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    outline: none !important;
}

/* Focus state */
.frm_forms .frm_checkbox input[type="checkbox"]:focus,
.newsletter-modal-content .frm_checkbox input[type="checkbox"]:focus {
    border-color: var(--wp--preset--color--accent-2) !important;
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1) !important;
}

/* Checked state */
.frm_forms .frm_checkbox input[type="checkbox"]:checked,
.newsletter-modal-content .frm_checkbox input[type="checkbox"]:checked {
    background-color: var(--wp--preset--color--accent-2) !important;
    border-color: var(--wp--preset--color--accent-2) !important;
}

/* Checkmark */
.frm_forms .frm_checkbox input[type="checkbox"]:checked::after,
.newsletter-modal-content .frm_checkbox input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 40% !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    width: 0.4rem !important;
    height: 0.85rem !important;
    border: solid white !important;
    border-width: 0 3.5px 3.5px 0 !important;
}

/* Checked state - highlight the card */
.frm_forms .frm_checkbox:has(input[type="checkbox"]:checked) label,
.newsletter-modal-content .frm_checkbox:has(input[type="checkbox"]:checked) label {
    border-color: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--contrast) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .frm_forms select,
    .newsletter-modal-content select {
        padding: 0.875rem 2.5rem 0.875rem 1rem !important;
        font-size: 1rem !important;
    }
}

/* ============================================
   UNIVERSAL CONTAINER RESET
   Remove default Formidable fieldset borders/padding
   Excludes #frm_form_2_container (newsletter inline form — custom layout)
   ============================================ */

.frm_forms:not(#frm_form_2_container) .frm_fields_container,
.newsletter-modal-content .frm_fields_container {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.frm_forms:not(#frm_form_2_container) fieldset,
.newsletter-modal-content fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================
   UNIVERSAL LABEL HIDING
   All forms use placeholder text — labels are redundant
   ============================================ */

.frm_forms:not(#frm_form_2_container) .frm_primary_label,
.newsletter-modal-content .frm_primary_label {
    display: none !important;
}

/* ============================================
   UNIVERSAL INPUT & TEXTAREA STYLING
   ============================================ */

.frm_forms:not(#frm_form_2_container) input[type="text"],
.frm_forms:not(#frm_form_2_container) input[type="email"],
.frm_forms:not(#frm_form_2_container) input[type="tel"],
.frm_forms:not(#frm_form_2_container) input[type="number"],
.frm_forms:not(#frm_form_2_container) textarea,
.newsletter-modal-content input[type="text"],
.newsletter-modal-content input[type="email"],
.newsletter-modal-content input[type="tel"],
.newsletter-modal-content input[type="number"],
.newsletter-modal-content textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 1.25rem !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    transition: all 0.3s ease !important;
    background: #f9fafb !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.frm_forms:not(#frm_form_2_container) input[type="text"]:focus,
.frm_forms:not(#frm_form_2_container) input[type="email"]:focus,
.frm_forms:not(#frm_form_2_container) input[type="tel"]:focus,
.frm_forms:not(#frm_form_2_container) input[type="number"]:focus,
.frm_forms:not(#frm_form_2_container) textarea:focus,
.newsletter-modal-content input[type="text"]:focus,
.newsletter-modal-content input[type="email"]:focus,
.newsletter-modal-content input[type="tel"]:focus,
.newsletter-modal-content input[type="number"]:focus,
.newsletter-modal-content textarea:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--accent-2) !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.1) !important;
}

/* ============================================
   UNIVERSAL TEXTAREA PLACEHOLDER COLOR
   ============================================ */

.frm_forms:not(#frm_form_2_container) textarea::placeholder,
.newsletter-modal-content textarea::placeholder {
    font-size: 1rem !important;
    font-family: inherit !important;
    color: #9DA3AF !important;
    opacity: 1 !important;
}

.frm_forms:not(#frm_form_2_container) textarea::-webkit-input-placeholder,
.newsletter-modal-content textarea::-webkit-input-placeholder {
    font-size: 1rem !important;
    font-family: inherit !important;
    color: #9DA3AF !important;
}

.frm_forms:not(#frm_form_2_container) textarea::-moz-placeholder,
.newsletter-modal-content textarea::-moz-placeholder {
    font-size: 1rem !important;
    font-family: inherit !important;
    color: #9DA3AF !important;
}

/* ============================================
   UNIVERSAL FIELD SPACING
   ============================================ */

.frm_forms:not(#frm_form_2_container) .frm_form_field,
.newsletter-modal-content .frm_form_field {
    margin-bottom: 0.75rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ============================================
   UNIVERSAL SUBMIT BUTTON
   ============================================ */

.frm_forms:not(#frm_form_2_container) .frm_submit,
.newsletter-modal-content .frm_submit {
    margin-top: 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
}

.frm_forms:not(#frm_form_2_container) .frm_submit.frm_flex,
.newsletter-modal-content .frm_submit.frm_flex {
    justify-content: center !important;
}

.frm_forms:not(#frm_form_2_container) .frm_button_submit,
.newsletter-modal-content .frm_button_submit {
    width: auto !important;
    min-width: 200px !important;
    padding: 1.25rem 5rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    font-family: var(--wp--preset--font-family--oilvare-base-rough) !important;
    background-color: var(--wp--preset--color--accent-2) !important;
    color: white !important;
    border: none !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.frm_forms:not(#frm_form_2_container) .frm_button_submit:hover,
.newsletter-modal-content .frm_button_submit:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(197, 48, 48, 0.3) !important;
}

/* ============================================
   UNIVERSAL ERROR STYLING
   ============================================ */

.frm_forms:not(#frm_form_2_container) .frm_error_style,
.newsletter-modal-content .frm_error_style {
    display: none !important;
}

.frm_forms:not(#frm_form_2_container) .frm_error,
.newsletter-modal-content .frm_error {
    color: var(--wp--preset--color--accent-2) !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
    padding: 0.75rem 1rem !important;
    background: rgba(197, 48, 48, 0.08) !important;
    border-radius: 0.5rem !important;
    border-left: 3px solid var(--wp--preset--color--accent-2) !important;
    font-weight: 500 !important;
}

.frm_forms:not(#frm_form_2_container) input[aria-invalid="true"],
.frm_forms:not(#frm_form_2_container) textarea[aria-invalid="true"],
.newsletter-modal-content input[aria-invalid="true"],
.newsletter-modal-content textarea[aria-invalid="true"] {
    border-color: var(--wp--preset--color--accent-2) !important;
    background: rgba(197, 48, 48, 0.05) !important;
}

/* ============================================
   HONEYPOT - Hide spam trap field
   Field 96 is the honeypot across all forms
   ============================================ */

#frm_field_96_container {
    display: none !important;
}

/* ============================================
   NEWSLETTER FORM WIDTH IN HERO
   Constrain #frm_form_2_container when inside .hero-content
   ============================================ */

.hero-content #frm_form_2_container {
    max-width: 50% !important;
}

@media (min-width: 1440px) {
    .hero-content #frm_form_2_container {
        max-width: 40% !important;
    }
}

@media (max-width: 768px) {
    .hero-content #frm_form_2_container {
        max-width: 100% !important;
    }
}

/* ============================================
   UNIVERSAL RESPONSIVE - Stack 2-column fields
   ============================================ */

@media (max-width: 768px) {
    .frm_forms:not(#frm_form_2_container) .frm6,
    .newsletter-modal-content .frm6 {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
    }

    .frm_forms:not(#frm_form_2_container) .frm6.frm_first,
    .newsletter-modal-content .frm6.frm_first {
        margin-right: 0 !important;
        margin-bottom: 0.75rem !important;
    }
}

.ss-form-parent-center {
	justify-content: center;
}

.ss-form-width {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Tablet */
@media (min-width: 768px) {
	.ss-form-width {
		flex: 0 0 80%;
		max-width: 80%;
		width: 80%;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.ss-form-width {
		flex: 0 0 65%;
		max-width: 65%;
		width: 65%;
	}
}