/* ==========================================================================
   Consolidated Form Stylesheet (forms.css)
   Combines: tailwind-form.css, vue-tailwind-form.css, sidebar-forms.css, vue-range-slider.css
   ========================================================================== */

/* --- 1. ROOT & TYPOGRAPHY DEFAULTS --- */
.form-section,
.form-section *,
.form-widget,
.form-widget * {
    font-family: 'Mona Sans', sans-serif !important;
    box-sizing: border-box;
}

.form-section .titleSideBar,
.form-section .header_text {
    font-family: 'Mona Sans', sans-serif !important;
}

/* --- 2. MAIN LAYOUT GRID / FLEX --- */
form-widget .form-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
}

@media (min-width: 1024px) {
    form-widget .form-section {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
}

.itf-form {
    flex-grow: 1 !important;
    width: 100% !important;
}

.wysiwyg-editor .itf-form li {
    padding-left: 0 !important;
}

.wysiwyg-editor .itf-form ul li::before {
    display: none;
}

.biznestream-form {
    width: 100% !important;
}

.formPage {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

form-widget ul,
.form-widget ul {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

form-widget li,
.form-widget li {
    margin: 0 !important;
}

.form-element {
    margin-bottom: 0 !important;
    width: 100% !important;
}

/* --- 3. SIDEBAR (SELECTION & ORDER SUMMARY) --- */
.sidebar-wrap,
.sidebar-wrap.side-bar {
    background-color: var(--color-white) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 12px !important;
    padding: 1.25rem !important;
    width: 30% !important;
    box-sizing: border-box !important;
    order: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.025) !important;
    transition: all 0.3s ease !important;
}

.dark .sidebar-wrap,
.dark .sidebar-wrap.side-bar {
    background-color: transparent !important;
    border-color: #384145 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

@media (min-width: 1024px) {

    .sidebar-wrap,
    .sidebar-wrap.side-bar {
        width: 420px !important;
        flex-shrink: 0 !important;
    }
}

.sidebar-wrap--order-form {
    width: 50% !important;
    flex: 0 0 50% !important;
}

.sidebar-wrap .titleSideBar,
.sidebar-wrap--order-form .titleSideBar {
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--border-main) !important;
    padding-bottom: 0.75rem !important;
}

.sidebar-wrap--order-form .titleSideBar {
    text-align: center !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
}

.dark .sidebar-wrap .titleSideBar,
.dark .sidebar-wrap--order-form .titleSideBar {
    color: var(--text-primary) !important;
    border-color: #384145 !important;
}

.sidebar-wrap .stepName {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #000000 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1rem !important;
}

.dark .sidebar-wrap .stepName {
    color: var(--btn-primary-bg) !important;
}

.sidebar-wrap .field-item {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid #F3F4F6 !important;
    border-radius: 8px !important;
}

.dark .sidebar-wrap .field-item {
    border-color: #384145 !important;
}

.sidebar-wrap .field-item:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.sidebar-wrap .field-value {
    display: flex !important;
    flex-direction: column !important;
}

.sidebar-wrap .field-value>div:first-child {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
}

.dark .sidebar-wrap .field-value>div:first-child {
    color: var(--text-muted) !important;
}

.itemValue {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-top: 0.25rem !important;
    word-break: break-all !important;
}

.dark .itemValue {
    color: var(--text-primary) !important;
}

.sidebar-wrap--order-form .order-summary-title {
    text-align: left !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    margin-bottom: 1rem !important;
}

.dark .sidebar-wrap--order-form .order-summary-title {
    color: var(--text-muted) !important;
}

.sidebar-wrap--placeholder {
    min-height: 1px !important;
}

.field-value {
    background-color: var(--gray-50) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.25rem !important;
}

.dark .field-value {
    background-color: transparent !important;
    border-color: #384145 !important;
}

.order-summary-value {
    border: 2px solid var(--border-main) !important;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.dark .order-summary-value {
    border-color: var(--border-main) !important;
}

.order-summary-value+.order-summary-value {
    margin-top: 1rem !important;
}

.summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.625rem !important;
}

.sidebar-wrap--order-form .summary-row>span:first-child {
    font-weight: 700 !important;
    color: var(--gray-500) !important;
}

.dark .sidebar-wrap--order-form .summary-row>span:first-child {
    color: var(--gray-500) !important;
}

.sidebar-wrap--order-form .summary-row .itemValue {
    font-weight: 400 !important;
}

.summary-row-total {
    padding-top: 0.75rem !important;
    margin-bottom: 0 !important;
    border-top: 1px solid var(--border-main) !important;
}

.dark .summary-row-total {
    border-color: var(--border-main) !important;
}

.sidebar-wrap--order-form .summary-row-total .itemValue {
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

.dark .sidebar-wrap--order-form .summary-row-total .itemValue {
    color: var(--text-primary) !important;
}

.summary-entry {
    padding-bottom: 0.75rem !important;
}

.summary-entry+.summary-entry {
    margin-top: 0.875rem !important;
    padding-top: 0.875rem !important;
    border-top: 1px solid var(--border-main) !important;
}

.dark .summary-entry+.summary-entry {
    border-color: var(--border-main) !important;
}

.order-summary-value-grand-total {
    border: 2px solid var(--main-color) !important;
    border-radius: 8px !important;
    background-color: var(--main-color-light) !important;
}

.dark .order-summary-value-grand-total {
    border-color: var(--main-color) !important;
    background-color: var(--main-color-light) !important;
}

.summary-row-grand-total {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

.dark .summary-row-grand-total {
    color: var(--text-primary) !important;
}

.summary-total-lines {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.summary-total-line+.summary-total-line {
    margin-top: 0.25rem !important;
}

/* --- 4. FORM NAVIGATION STEP TABS --- */
.form-nav {
    margin-bottom: 1.5rem !important;
    border-bottom: 1px solid var(--border-main) !important;
    padding-bottom: 0.75rem !important;
}

.dark .form-nav {
    border-color: #384145 !important;
}

.form-nav__container {
    display: flex !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
}

.form-nav__item {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 9999px !important;
    background-color: #F3F4F6 !important;
    border: 1px solid var(--border-main) !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.form-nav__item:hover {
    background-color: #E5E7EB !important;
    color: var(--text-primary) !important;
}

.dark .form-nav__item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: #384145 !important;
    color: var(--text-muted) !important;
}

.dark .form-nav__item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-white) !important;
}

.form-nav__item--selected {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.dark .form-nav__item--selected {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

/* --- 5. HEADERS, LABELS & REQUIRED INDICATORS --- */
.header_text {
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.25 !important;
}

.dark .header_text {
    color: var(--text-primary) !important;
}

.form-element label.form-label,
.itf-label__label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin-bottom: 0.625rem !important;
}

.dark .form-element label.form-label,
.dark .itf-label__label {
    color: #ffffff !important;
}

.star {
    color: var(--color-error) !important;
    margin-left: 0.125rem !important;
}

form-widget b.requred,
.form-widget b.requred {
    color: var(--color-error) !important;
    font-weight: 600 !important;
}

form-widget .control,
.form-widget .control {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* --- 6. STANDARD INPUTS & SELECT BOXES --- */

.form_input input.form_input,
.form_input input[type="text"],
.form_input input[type="email"],
.form_input input[type="tel"],
.form_input select {
    width: 100% !important;
    font-size: 1rem !important;
    padding: 1rem 1.5rem !important;
    border-radius: 1rem !important; /* rounded-2xl */
    border: 1px solid var(--border-main) !important;
    background-color: var(--color-white) !important;
    color: var(--text-primary) !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.dark form-widget .form_input,
.dark .form-widget .form_input,
.dark .form_input input.form_input,
.dark .form_input input[type="text"],
.dark .form_input input[type="email"],
.dark .form_input input[type="tel"],
.dark .form_input select {
    background-color: rgba(23, 23, 23, 0.4) !important;
    border-color: #262626 !important;
    color: var(--text-primary) !important;
}

form-widget .form_input:focus,
.form-widget .form_input:focus,
.form_input input.form_input:focus,
.form_input input[type="text"]:focus,
.form_input input[type="email"]:focus,
.form_input input[type="tel"]:focus,
.form_input select:focus {
    border-color: var(--text-primary) !important;
    box-shadow: 0 0 0 4px var(--input-focus-shadow) !important;
}

.dark form-widget .form_input:focus,
.dark .form-widget .form_input:focus,
.dark .form_input input.form_input:focus,
.dark .form_input input[type="text"]:focus,
.dark .form_input input[type="email"]:focus,
.dark .form_input input[type="tel"]:focus,
.dark .form_input select:focus {
    border-color: var(--color-white) !important;
    box-shadow: 0 0 0 4px var(--input-focus-shadow) !important;
}

.form_input select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23737373' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 1rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 3rem !important;
}

.dark .form_input select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a3a3a3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

form-widget .b-field-protected.form-input-container::after,
.form-widget .b-field-protected.form-input-container::after {
    background-color: transparent !important;
    border-radius: 0 !important;
    border: 1px solid var(--border-main) !important;
    right: 12px !important;
    top: 22px !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    width: 28px !important;
    height: 28px !important;
    filter: opacity(0.7) !important;
    content: " " !important;
    position: absolute !important;
    display: block !important;
}

.dark form-widget .b-field-protected.form-input-container::after,
.dark .form-widget .b-field-protected.form-input-container::after {
    background-color: transparent !important;
    border-color: var(--gray-500) !important;
    filter: opacity(0.7) !important;
}

/* --- 7. CHECKBOXES AND RADIOS (SIMPLE & CUSTOM MARKUP) --- */
form-widget .check_box,
.form-widget .check_box {
    position: relative !important;
    padding-left: 1.75rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--text-secondary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.dark form-widget .check_box,
.dark .form-widget .check_box {
    color: var(--gray-500) !important;
}

form-widget .check_box::before,
.form-widget .check_box::before {
    content: "" !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 0 !important;
    border: 1px solid #D1D5DB !important;
    background-color: var(--color-white) !important;
    position: absolute !important;
    transition: all 0.2s ease !important;
}

.dark form-widget .check_box::before,
.dark .form-widget .check_box::before {
    border-color: var(--gray-500) !important;
    background-color: var(--input-bg) !important;
}

form-widget .check_box.checked::before,
.form-widget .check_box.checked::before {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-size: 0.875rem !important;
    background-repeat: no-repeat !important;
}

.dark form-widget .check_box.checked::before,
.dark .form-widget .check_box.checked::before {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

form-widget [type="radio"].input-radio-custom+label>span,
.form-widget [type="radio"].input-radio-custom+label>span {
    position: relative !important;
    cursor: pointer !important;
    display: inline-block !important;
    height: 25px !important;
    line-height: 25px !important;
    user-select: none !important;
    padding-left: 24px !important;
}

form-widget [type="radio"].input-radio-custom+label>span::before,
form-widget [type="radio"].input-radio-custom+label>span::after,
.form-widget [type="radio"].input-radio-custom+label>span::before,
.form-widget [type="radio"].input-radio-custom+label>span::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    transition: all 0.28s ease !important;
}

form-widget [type="radio"].input-radio-custom+label>span::before,
.form-widget [type="radio"].input-radio-custom+label>span::before {
    background-color: var(--color-white) !important;
    border: 2px solid #D1D5DB !important;
    left: 0 !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 1 !important;
}

.dark form-widget [type="radio"].input-radio-custom+label>span::before,
.dark .form-widget [type="radio"].input-radio-custom+label>span::before {
    background-color: var(--input-bg) !important;
    border-color: var(--gray-500) !important;
}

form-widget .input-radio-custom:checked+label>span::before,
.form-widget .input-radio-custom:checked+label>span::before {
    border-color: var(--main-color) !important;
}

.dark form-widget .input-radio-custom:checked+label>span::before,
.dark .form-widget .input-radio-custom:checked+label>span::before {
    border-color: var(--main-color) !important;
}

form-widget .input-radio-custom:checked+label>span::after,
.form-widget .input-radio-custom:checked+label>span::after {
    background-color: var(--main-color) !important;
    left: 4px !important;
    top: 7px !important;
    width: 10px !important;
    height: 10px !important;
    z-index: 2 !important;
    transform: scale(1) !important;
}

.dark form-widget .input-radio-custom:checked+label>span::after,
.dark .form-widget .input-radio-custom:checked+label>span::after {
    background-color: var(--main-color) !important;
}

form-widget [type="checkbox"].input-checkbox-custom+label>span,
.form-widget [type="checkbox"].input-checkbox-custom+label>span {
    position: relative !important;
    cursor: pointer !important;
    display: inline-block !important;
    height: 25px !important;
    line-height: 25px !important;
    user-select: none !important;
    padding-left: 24px !important;
}

form-widget [type="checkbox"].input-checkbox-custom+label>span::before,
.form-widget [type="checkbox"].input-checkbox-custom+label>span::before {
    content: "" !important;
    position: absolute !important;
    background-color: var(--color-white) !important;
    border: 2px solid #D1D5DB !important;
    border-radius: 0 !important;
    left: 0 !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 1 !important;
    transition: all 0.28s ease !important;
}

.dark form-widget [type="checkbox"].input-checkbox-custom+label>span::before,
.dark .form-widget [type="checkbox"].input-checkbox-custom+label>span::before {
    background-color: var(--input-bg) !important;
    border-color: var(--gray-500) !important;
}

form-widget .input-checkbox-custom:checked+label>span::before,
.form-widget .input-checkbox-custom:checked+label>span::before {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

.dark form-widget .input-checkbox-custom:checked+label>span::before,
.dark .form-widget .input-checkbox-custom:checked+label>span::before {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}

form-widget .input-checkbox-custom:checked+label>span::after,
.form-widget .input-checkbox-custom:checked+label>span::after {
    content: "\2713" !important;
    color: var(--color-white) !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    position: absolute !important;
    left: 4px !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 2 !important;
    transform: scale(1) !important;
}

/* --- 8. IMAGE-CARD CHECKBOXES/RADIOS GRID LAYOUT --- */
form-widget .input-radio-horizontal,
form-widget .input-checkbox-horizontal,
.form-widget .input-radio-horizontal,
.form-widget .input-checkbox-horizontal,
.input-checkbox-horizontal,
.input-radio-horizontal {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    margin-top: 0.25rem !important;
}

form-widget .input-radio-horizontal>div,
form-widget .input-checkbox-horizontal>div,
.form-widget .input-radio-horizontal>div,
.form-widget .input-checkbox-horizontal>div {
    width: 100% !important;
}

.input-checkbox-img,
.input-radio-img {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

form-widget .input-checkbox-img-label,
form-widget .input-radio-img-label,
.form-widget .input-checkbox-img-label,
.form-widget .input-radio-img-label,
.input-checkbox-img-label,
.input-radio-img-label {
    --colorSeleted: var(--text-primary) !important;
    --size_border: 1px !important;
    --size_radius: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
    padding: 1.5rem !important;
    border-radius: 1.5rem !important; /* rounded-3xl equivalent */
    border: 1px solid var(--border-main) !important;
    background-color: var(--color-white) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    width: 100% !important;
    height: 100% !important;
}

.dark form-widget .input-checkbox-img-label,
.dark form-widget .input-radio-img-label,
.dark .form-widget .input-checkbox-img-label,
.dark .form-widget .input-radio-img-label,
.dark .input-checkbox-img-label,
.dark .input-radio-img-label {
    --colorSeleted: var(--text-primary) !important;
    background-color: var(--btn-secondary-bg) !important;
    border-color: #262626 !important;
}

form-widget .input-checkbox-img-label:hover,
form-widget .input-radio-img-label:hover,
.form-widget .input-checkbox-img-label:hover,
.form-widget .input-radio-img-label:hover,
.input-checkbox-img-label:hover,
.input-radio-img-label:hover {
    transform: translateY(-2px) !important;
    border-color: var(--text-primary) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
}

.dark form-widget .input-checkbox-img-label:hover,
.dark form-widget .input-radio-img-label:hover,
.dark .form-widget .input-checkbox-img-label:hover,
.dark .form-widget .input-radio-img-label:hover,
.dark .input-checkbox-img-label:hover,
.dark .input-radio-img-label:hover {
    border-color: #ffffff !important;
}

form-widget .input-checkbox-img-label img,
form-widget .input-radio-img-label img,
.form-widget .input-checkbox-img-label img,
.form-widget .input-radio-img-label img,
.input-checkbox-img-label img,
.input-radio-img-label img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 0 !important;
    transition: transform 0.25s ease !important;
}

form-widget .input-checkbox-img-label span,
form-widget .input-radio-img-label span,
.form-widget .input-checkbox-img-label span,
.form-widget .input-radio-img-label span,
.input-checkbox-img-label span,
.input-radio-img-label span {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--gray-500) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    word-break: normal !important;
}

.dark form-widget .input-checkbox-img-label span,
.dark form-widget .input-radio-img-label span,
.dark .form-widget .input-checkbox-img-label span,
.dark .form-widget .input-radio-img-label span,
.dark .input-checkbox-img-label span,
.dark .input-radio-img-label span {
    color: var(--gray-500) !important;
}

/* Horizontal Layout Support */
.input-checkbox-img-label.horizontal,
.input-radio-img-label.horizontal {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.25rem !important;
    gap: 0.75rem !important;
}

form-widget .input-checkbox-img-label.horizontal,
form-widget .input-radio-img-label.horizontal,
.form-widget .input-checkbox-img-label.horizontal,
.form-widget .input-radio-img-label.horizontal {
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    padding: 0.75rem 1rem !important;
    gap: 1rem !important;
}

form-widget .input-checkbox-img-label.horizontal img,
form-widget .input-radio-img-label.horizontal img,
.form-widget .input-checkbox-img-label.horizontal img,
.form-widget .input-radio-img-label.horizontal img,
.input-checkbox-img-label.horizontal img,
.input-radio-img-label.horizontal img {
    width: 80px !important;
    height: 80px !important;
    flex-shrink: 0 !important;
}

.input-checkbox-img-label.horizontal span,
.input-radio-img-label.horizontal span {
    text-align: center !important;
}

/* Checked States */
form-widget .input-checkbox-img:checked+.input-checkbox-img-label,
form-widget .input-radio-img:checked+.input-radio-img-label,
.form-widget .input-checkbox-img:checked+.input-checkbox-img-label,
.form-widget .input-radio-img:checked+.input-radio-img-label,
.input-checkbox-img:checked+.input-checkbox-img-label,
.input-radio-img:checked+.input-radio-img-label {
    border-color: var(--colorSeleted, var(--text-primary)) !important;
    border-width: var(--size_border, 1px) !important;
    border-radius: var(--size_radius, 1.5rem) !important;
    background-color: var(--gray-100) !important;
    box-shadow: 0 0 0 3px var(--input-focus-shadow) !important;
}

.dark form-widget .input-checkbox-img:checked+.input-checkbox-img-label,
.dark form-widget .input-radio-img:checked+.input-radio-img-label,
.dark .form-widget .input-checkbox-img:checked+.input-checkbox-img-label,
.dark .form-widget .input-radio-img:checked+.input-radio-img-label,
.dark .input-checkbox-img:checked+.input-checkbox-img-label,
.dark .input-radio-img:checked+.input-radio-img-label {
    border-color: var(--gray-800) !important;
    background-color: var(--gray-150) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05) !important;
}

form-widget .input-checkbox-img:checked+.input-checkbox-img-label span,
form-widget .input-radio-img:checked+.input-radio-img-label span,
.form-widget .input-checkbox-img:checked+.input-checkbox-img-label span,
.form-widget .input-radio-img:checked+.input-radio-img-label span,
.input-checkbox-img:checked+.input-checkbox-img-label span,
.input-radio-img:checked+.input-radio-img-label span {
    color: #000000 !important;
}

.dark form-widget .input-checkbox-img:checked+.input-checkbox-img-label span,
.dark form-widget .input-radio-img:checked+.input-radio-img-label span,
.dark .form-widget .input-checkbox-img:checked+.input-checkbox-img-label span,
.dark .form-widget .input-radio-img:checked+.input-radio-img-label span,
.dark .input-checkbox-img:checked+.input-checkbox-img-label span,
.dark .input-radio-img:checked+.input-radio-img-label span {
    color: var(--btn-primary-bg) !important;
}

form-widget .input-checkbox-img:checked+.input-checkbox-img-label img,
form-widget .input-radio-img:checked+.input-radio-img-label img,
.form-widget .input-checkbox-img:checked+.input-checkbox-img-label img,
.form-widget .input-radio-img:checked+.input-radio-img-label img,
.input-checkbox-img:checked+.input-checkbox-img-label img,
.input-radio-img:checked+.input-radio-img-label img {
    transform: scale(1.08) !important;
}

/* --- 9. MULTI RANGE SLIDERS --- */
.form_input_wrapper_media {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    .form_input_wrapper_media {
        flex-direction: row !important;
        align-items: center !important;
    }
}

.range_slider_img,
form-widget .range_slider_element .range_slider_img,
.form-widget .range_slider_element .range_slider_img {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--gray-100) !important;
    border-radius: 0 !important;
    padding: 0.5rem !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
}

.dark .range_slider_img,
.dark form-widget .range_slider_element .range_slider_img,
.dark .form-widget .range_slider_element .range_slider_img {
    background: #3c464b !important;
}

.range_slider_img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

form-widget .range_slider_element .form_input_wrapper,
.form-widget .range_slider_element .form_input_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

form-widget .range_slider_value,
.form-widget .range_slider_value,
.range_slider_value {
    padding: 0.375rem 0.75rem !important;
    min-width: 60px !important;
    text-align: center !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 0 !important;
    background-color: var(--color-white) !important;
    color: #000000 !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
}

.dark form-widget .range_slider_value,
.dark .form-widget .range_slider_value,
.dark .range_slider_value {
    border-color: var(--border-main) !important;
    background-color: rgba(29, 29, 32, 0.4) !important;
    color: var(--btn-primary-bg) !important;
}

form-widget .range_slider_value--min,
.form-widget .range_slider_value--min,
.range_slider_value--min {
    margin-right: 10px !important;
    min-width: 90px !important;
}

form-widget .range_slider_value--max,
.form-widget .range_slider_value--max,
.range_slider_value--max {
    margin-left: 10px !important;
    min-width: 90px !important;
}

.multi_range_slider,
.multi-range-slider {
    display: flex !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    padding: 1.5rem 0.5rem 0.5rem 0.5rem !important;
    flex-direction: column !important;
    user-select: none !important;
}

.multi-range-slider .bar {
    height: 6px !important;
    background-color: var(--border-main) !important;
    border-radius: 999px !important;
    position: relative !important;
    box-shadow: none !important;
    border: none !important;
}

.dark .multi-range-slider .bar {
    background-color: #3c464b !important;
}

.multi-range-slider .bar-left,
.multi-range-slider .bar-right {
    background-color: var(--border-main) !important;
    box-shadow: none !important;
    border: none !important;
    height: 100% !important;
    padding: 0 !important;
}

.dark .multi-range-slider .bar-left,
.dark .multi-range-slider .bar-right {
    background-color: #3c464b !important;
}

.multi-range-slider .bar-inner {
    background-color: #4b5563 !important;
    box-shadow: none !important;
    border: none !important;
    height: 100% !important;
    border-radius: 999px !important;
}

.dark .multi-range-slider .bar-inner {
    background-color: var(--btn-primary-bg) !important;
}

.multi-range-slider .thumb {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background-color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    top: -8px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    transition: transform 0.15s ease, border-color 0.15s ease !important;
}

.dark .multi-range-slider .thumb {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

.multi-range-slider .thumb:hover {
    transform: scale(1.15) !important;
}

.multi-range-slider .thumb::before {
    display: none !important;
    content: none !important;
}

.multi-range-slider .caption {
    position: absolute !important;
    bottom: 25px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.multi-range-slider .thumb .caption * {
    background-color: #000000 !important;
    color: var(--color-white) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    border-radius: 0.375rem !important;
    padding: 2px 6px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    line-height: normal !important;
    height: auto !important;
}

.dark .multi-range-slider .thumb .caption * {
    background-color: var(--btn-primary-bg) !important;
    color: #1D1D20 !important;
}

.multi-range-slider .ruler,
.multi-range-slider .sub-ruler {
    display: none !important;
}

.multi-range-slider .labels {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

.multi-range-slider .label,
.multi-range-slider .labels .label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    width: auto !important;
}

.dark .multi-range-slider .label,
.dark .multi-range-slider .labels .label {
    color: var(--text-muted) !important;
}

/* --- 10. FILE UPLOAD ZONE --- */
form-widget .upload_dropzone,
.form-widget .upload_dropzone {
    border: 2px dashed #CBD5E1 !important;
    border-radius: 0 !important;
    padding: 1.5rem !important;
    text-align: center !important;
    background-color: #F8FAFC !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.dark form-widget .upload_dropzone,
.dark .form-widget .upload_dropzone {
    border-color: #475569 !important;
    background-color: var(--bg-card) !important;
}

form-widget .upload_dropzone--dragging,
.form-widget .upload_dropzone--dragging {
    border-color: var(--main-color) !important;
    background-color: var(--card-checked-bg) !important;
}

.dark form-widget .upload_dropzone--dragging,
.dark .form-widget .upload_dropzone--dragging {
    border-color: var(--main-color) !important;
    background-color: rgba(79, 209, 197, 0.05) !important;
}

form-widget .upload-pending-item,
form-widget .upload-result-item,
.form-widget .upload-pending-item,
.form-widget .upload-result-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 0 !important;
    background-color: var(--color-white) !important;
}

.dark form-widget .upload-pending-item,
.dark form-widget .upload-result-item,
.dark .form-widget .upload-pending-item,
.dark .form-widget .upload-result-item {
    border-color: var(--border-main) !important;
    background-color: var(--bg-card) !important;
}

form-widget .upload_remove,
.form-widget .upload_remove {
    border: 0 !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--color-error) !important;
    font-size: 20px !important;
}

/* --- 11. BUTTONS, ACTIONS & LAYOUT GUTTERS --- */
.formPage p {
    font-size: 0.875rem !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
}

.dark .formPage p {
    color: var(--text-muted) !important;
}

.formPage a {
    color: #000000 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

.dark .formPage a {
    color: var(--btn-primary-bg) !important;
}

.formPage a:hover {
    color: var(--main-color-hover) !important;
}

.dark .formPage a:hover {
    color: var(--btn-primary-hover-bg) !important;
}

.form-actions {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--border-main) !important;
    width: 100% !important;
}

.dark .form-actions {
    border-color: #384145 !important;
}

.order-product-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--border-main) !important;
    width: 100% !important;
}

.dark .order-product-checkout {
    border-color: var(--border-main) !important;
}

@media (min-width: 640px) {
    .order-product-checkout {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }
}

.form-actions .form_input {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
}

form-widget .submitButton,
form-widget .nextButton,
.form-widget .submitButton,
.form-widget .nextButton,
.submitButton,
.nextButton,
.order-product-checkout-button,
.order-product-add-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #09090b !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 9999px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease-in-out !important;
    outline: none !important;
    width: 100% !important;
}

.dark form-widget .submitButton,
.dark form-widget .nextButton,
.dark .form-widget .submitButton,
.dark .form-widget .nextButton,
.dark .submitButton,
.dark .nextButton,
.dark .order-product-checkout-button,
.dark .order-product-add-button {
    background-color: #ffffff !important;
    color: #09090b !important;
    border-color: transparent !important;
}

form-widget .backButton,
.form-widget .backButton,
.backButton,
.order-product-clear-cart-button,
.order-product-remove-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    color: #09090b !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 9999px !important;
    border: 1px solid #09090b !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
    outline: none !important;
    width: 100% !important;
}

.dark form-widget .backButton,
.dark .form-widget .backButton,
.dark .backButton,
.dark .order-product-clear-cart-button,
.dark .order-product-remove-button {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
}

.order-product-remove-button {
    padding: 0.625rem 1.25rem !important;
}

@media (min-width: 640px) {

    form-widget .submitButton,
    form-widget .nextButton,
    .form-widget .submitButton,
    .form-widget .nextButton,
    form-widget .backButton,
    .form-widget .backButton,
    .submitButton,
    .nextButton,
    .backButton,
    .order-product-checkout-button,
    .order-product-clear-cart-button,
    .order-product-add-button,
    .order-product-remove-button {
        width: auto !important;
        margin-left: 0.75rem !important;
    }
}

form-widget .submitButton:hover,
form-widget .nextButton:hover,
.form-widget .submitButton:hover,
.form-widget .nextButton:hover,
.submitButton:hover,
.nextButton:hover,
.order-product-checkout-button:hover,
.order-product-add-button:hover {
    background-color: #262626 !important;
    color: #ffffff !important;
}

.dark form-widget .submitButton:hover,
.dark form-widget .nextButton:hover,
.dark .form-widget .submitButton:hover,
.dark .form-widget .nextButton:hover,
.dark .submitButton:hover,
.dark .nextButton:hover,
.dark .order-product-checkout-button:hover,
.dark .order-product-add-button:hover {
    background-color: #f5f5f5 !important;
    color: #09090b !important;
}

form-widget .backButton:hover,
.form-widget .backButton:hover,
.backButton:hover,
.order-product-clear-cart-button:hover,
.order-product-remove-button:hover {
    background-color: rgba(9, 9, 11, 0.05) !important;
    color: #09090b !important;
}

.dark form-widget .backButton:hover,
.dark .form-widget .backButton:hover,
.dark .backButton:hover,
.dark .order-product-clear-cart-button:hover,
.dark .order-product-remove-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

form-widget .submitButton:active,
form-widget .nextButton:active,
form-widget .backButton:active,
.form-widget .submitButton:active,
.form-widget .nextButton:active,
.form-widget .backButton:active,
.submitButton:active,
.nextButton:active,
.backButton:active,
.order-product-checkout-button:active,
.order-product-clear-cart-button:active,
.order-product-add-button:active,
.order-product-remove-button:active {
    transform: scale(0.97) !important;
}

form-widget .submitButton:active,
form-widget .nextButton:active,
.form-widget .submitButton:active,
.form-widget .nextButton:active,
.submitButton:active,
.nextButton:active,
.order-product-checkout-button:active,
.order-product-add-button:active {
    background-color: var(--main-color-hover) !important;
}

/* --- 12. READONLY PRICE DISPLAYS & FORMULAS --- */
input.form_input.product-price {
    background-color: var(--main-color-light) !important;
    border-color: var(--border-light) !important;
    color: var(--main-color) !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    cursor: default !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02) !important;
    letter-spacing: 0.05em !important;
}

.dark input.form_input.product-price {
    background-color: var(--main-color-light) !important;
    border-color: var(--border-main) !important;
    color: var(--main-color) !important;
}

input.form_input.product-price:focus {
    border-color: var(--border-light) !important;
    box-shadow: none !important;
}

.dark input.form_input.product-price:focus {
    border-color: var(--border-main) !important;
    box-shadow: none !important;
}

.order-product-title-formula {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
    letter-spacing: -0.02em !important;
}

.dark .order-product-title-formula {
    color: var(--color-white) !important;
}

/* --- 13. ERROR STATES --- */
form-widget .text-danger,
.form-widget .text-danger,
form-widget .error,
.form-widget .error,
.error {
    color: var(--color-error) !important;
    font-weight: 600 !important;
    display: block !important;
    font-size: 0.75rem !important;
    margin-top: 0.375rem !important;
}

form-widget .has-error .error,
.form-widget .has-error .error {
    color: var(--color-error) !important;
    display: block !important;
    margin-bottom: 0.625rem !important;
}

/* --- 14. RESPONSIVE LAYOUT QUERIES --- */
@media screen and (max-width: 1024px) {
    .sidebar-wrap {
        display: none !important;
    }

    form-widget .form_input_wrapper_media,
    .form-widget .form_input_wrapper_media {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    form-widget .multi_range_slider,
    .form-widget .multi_range_slider {
        width: 100% !important;
        margin-bottom: 0 !important;
    }

    form-widget .range_slider_img,
    .form-widget .range_slider_img {
        display: flex !important;
    }

    form-widget .range_slider_value.range_slider_value--min,
    form-widget .range_slider_value.range_slider_value--max,
    .form-widget .range_slider_value.range_slider_value--min,
    .form-widget .range_slider_value.range_slider_value--max {
        width: auto !important;
        margin: 0 !important;
    }

    form-widget .input-radio-horizontal,
    form-widget .input-checkbox-horizontal,
    .form-widget .input-radio-horizontal,
    .form-widget .input-checkbox-horizontal {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
        gap: 0.75rem !important;
    }

    form-widget .input-radio-horizontal>div,
    form-widget .input-checkbox-horizontal>div,
    .form-widget .input-radio-horizontal>div,
    .form-widget .input-checkbox-horizontal>div {
        width: 100% !important;
    }

    form-widget .input-checkbox-img-label.horizontal,
    form-widget .input-radio-img-label.horizontal,
    .form-widget .input-checkbox-img-label.horizontal,
    .form-widget .input-radio-img-label.horizontal {
        flex-direction: row !important;
        align-items: center !important;
    }
}

@media (max-width: 991px) {
    .form-element {
        padding: 0 !important;
    }

    html body .wide-page .form-section .formPage li,
    body .wide-page .form-section .formPage li,
    .wide-page .form-section .formPage li.form-element {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 640px) {

    form-widget .input-radio-horizontal,
    form-widget .input-checkbox-horizontal,
    .form-widget .input-radio-horizontal,
    .form-widget .input-checkbox-horizontal,
    .input-checkbox-horizontal,
    .input-radio-horizontal {
        grid-template-columns: 1fr !important;
    }
}

.side-bar {
    max-height: calc(100% - 70px) !important;
    overflow: auto;
}

ul.formPage {
    text-align: initial !important;
}