/**
 * Fluxos de demonstração usam superfícies claras (formulários + prévia).
 * Com o site no modo escuro, as variáveis globais deixam texto claro em fundo claro — este arquivo corrige isso.
 */
#service-modal.modal--saas-flow,
#service-modal.modal--uiux-flow,
#service-modal.modal--webdev-flow,
#service-modal.modal--ecommerce-flow {
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #64748b;
    --border-light: #e2e8f0;
    --border-color: #e2e8f0;
    --input-bg: #ffffff;
    --input-border: #cbd5e1;
}

#service-modal.modal--saas-flow .modal-content,
#service-modal.modal--uiux-flow .modal-content--demo,
#service-modal.modal--webdev-flow .modal-content--demo,
#service-modal.modal--ecommerce-flow .modal-content--demo {
    background: #ffffff;
    color: #0f172a;
    border-color: #e2e8f0;
}

#service-modal.modal--saas-flow .modal-header,
#service-modal.modal--uiux-flow .modal-header,
#service-modal.modal--webdev-flow .modal-header,
#service-modal.modal--ecommerce-flow .modal-header {
    border-bottom-color: #e2e8f0;
}

#service-modal.modal--saas-flow .modal-header h2,
#service-modal.modal--uiux-flow .modal-header h2,
#service-modal.modal--webdev-flow .modal-header h2,
#service-modal.modal--ecommerce-flow .modal-header h2 {
    color: #0f172a;
}

#service-modal.modal--saas-flow .modal-header p,
#service-modal.modal--uiux-flow .modal-header p,
#service-modal.modal--webdev-flow .modal-header p,
#service-modal.modal--ecommerce-flow .modal-header p,
#service-modal.modal--saas-flow .modal-subtitle,
#service-modal.modal--uiux-flow .modal-subtitle,
#service-modal.modal--webdev-flow .modal-subtitle,
#service-modal.modal--ecommerce-flow .modal-subtitle {
    color: #64748b;
}

#service-modal.modal--saas-flow .modal-close,
#service-modal.modal--uiux-flow .modal-close,
#service-modal.modal--webdev-flow .modal-close,
#service-modal.modal--ecommerce-flow .modal-close {
    color: #64748b;
}

#service-modal.modal--saas-flow .modal-close:hover,
#service-modal.modal--uiux-flow .modal-close:hover,
#service-modal.modal--webdev-flow .modal-close:hover,
#service-modal.modal--ecommerce-flow .modal-close:hover {
    color: #0f172a;
}

#service-modal.modal--saas-flow .modal-stepper,
#service-modal.modal--uiux-flow .modal-stepper,
#service-modal.modal--webdev-flow .modal-stepper,
#service-modal.modal--ecommerce-flow .modal-stepper {
    border-bottom-color: #e2e8f0;
}

#service-modal.modal--saas-flow .stepper-item,
#service-modal.modal--uiux-flow .stepper-item,
#service-modal.modal--webdev-flow .stepper-item,
#service-modal.modal--ecommerce-flow .stepper-item {
    color: #64748b;
}

#service-modal.modal--saas-flow .stepper-item.active,
#service-modal.modal--uiux-flow .stepper-item.active,
#service-modal.modal--webdev-flow .stepper-item.active,
#service-modal.modal--ecommerce-flow .stepper-item.active {
    color: #0f172a;
}

#service-modal.modal--saas-flow .form-group label,
#service-modal.modal--uiux-flow .form-group label,
#service-modal.modal--webdev-flow .form-group label,
#service-modal.modal--ecommerce-flow .form-group label,
#service-modal.modal--saas-flow .step-label,
#service-modal.modal--uiux-flow .step-label,
#service-modal.modal--webdev-flow .step-label,
#service-modal.modal--ecommerce-flow .step-label {
    color: #334155;
}

#service-modal.modal--saas-flow input,
#service-modal.modal--saas-flow textarea,
#service-modal.modal--saas-flow select,
#service-modal.modal--uiux-flow input,
#service-modal.modal--uiux-flow textarea,
#service-modal.modal--uiux-flow select,
#service-modal.modal--webdev-flow input,
#service-modal.modal--webdev-flow textarea,
#service-modal.modal--webdev-flow select,
#service-modal.modal--ecommerce-flow input,
#service-modal.modal--ecommerce-flow textarea,
#service-modal.modal--ecommerce-flow select {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

#service-modal.modal--saas-flow input::placeholder,
#service-modal.modal--saas-flow textarea::placeholder,
#service-modal.modal--uiux-flow input::placeholder,
#service-modal.modal--uiux-flow textarea::placeholder,
#service-modal.modal--webdev-flow input::placeholder,
#service-modal.modal--webdev-flow textarea::placeholder,
#service-modal.modal--ecommerce-flow input::placeholder,
#service-modal.modal--ecommerce-flow textarea::placeholder {
    color: #94a3b8;
}

#service-modal.modal--saas-flow .modal-footer,
#service-modal.modal--uiux-flow .modal-footer,
#service-modal.modal--webdev-flow .modal-footer,
#service-modal.modal--ecommerce-flow .modal-footer {
    background: #ffffff;
    border-top-color: #e2e8f0;
}

/* Rodapé fixo na base do card; área central rola sem cortar campos */
.modal-content--demo > #modal-footer:not(.hidden),
.modal-content--demo > #modal-security:not(.hidden) {
    flex-shrink: 0;
}

#service-modal .modal-scroll:not(.modal-scroll--step1) .modal-body .config-section {
    padding-bottom: 1rem;
}

#service-modal.modal--saas-flow #modal-scroll:not(.modal-scroll--step1) .saas-info-form,
#service-modal.modal--saas-flow #modal-scroll:not(.modal-scroll--step1) .saas-config-scroll,
#service-modal.modal--uiux-flow #modal-scroll:not(.modal-scroll--step1) .uiux-config-scroll,
#service-modal.modal--webdev-flow #modal-scroll:not(.modal-scroll--step1) .webdev-config-scroll,
#service-modal.modal--ecommerce-flow #modal-scroll:not(.modal-scroll--step1) .store-config-scroll {
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding-right: 0;
}

/* SaaS mantém verde em saas-flow.css */
#service-modal.modal--uiux-flow .modal-footer .btn-modal-next,
#service-modal.modal--webdev-flow .modal-footer .btn-modal-next,
#service-modal.modal--ecommerce-flow .modal-footer .btn-modal-next {
    background: linear-gradient(135deg, #7c3aed 0%, #6c3bff 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

#service-modal.modal--uiux-flow .modal-footer .btn-modal-next:hover,
#service-modal.modal--webdev-flow .modal-footer .btn-modal-next:hover,
#service-modal.modal--ecommerce-flow .modal-footer .btn-modal-next:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #5b21b6 100%);
}