:root {
--pf-primary: #667eea;
--pf-success: #48bb78;
--pf-error: #f56565;
--pf-warning: #ed8936;
--pf-info: #4299e1;
--pf-border: #e2e8f0;
--pf-text: #2d3748;
--pf-text-light: #718096;
}
.profi-form-container {
max-width: 100%;
margin: 20px 0;
}
.profi-form {
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
} .profi-form-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.profi-form-col {
flex: 0 0 auto;
min-width: 0;
} .profi-form-group {
margin-bottom: 25px;
animation: fadeInUp 0.5s ease;
}
.profi-form-col .profi-form-group {
margin-bottom: 0;
}
.profi-form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 15px;
transition: color 0.3s ease;
}
.profi-form-group label .required {
color: #e74c3c;
margin-left: 3px;
} .profi-form input[type="text"],
.profi-form input[type="email"],
.profi-form input[type="tel"],
.profi-form input[type="date"],
.profi-form input[type="file"],
.profi-form textarea,
.profi-form select {
width: 100%;
padding: 12px 16px;
border: 2px solid #e1e8ed;
border-radius: 6px;
font-size: 15px;
font-family: inherit;
transition: all 0.3s ease;
background: #fff;
}
.profi-form input[type="text"]:focus,
.profi-form input[type="email"]:focus,
.profi-form input[type="tel"]:focus,
.profi-form input[type="date"]:focus,
.profi-form textarea:focus,
.profi-form select:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}
.profi-form input[type="text"]:hover,
.profi-form input[type="email"]:hover,
.profi-form input[type="tel"]:hover,
.profi-form input[type="date"]:hover,
.profi-form textarea:hover,
.profi-form select:hover {
border-color: #a8c4e1;
} .profi-form textarea {
resize: vertical;
min-height: 120px;
} .profi-form-name-fields {
display: flex;
gap: 15px;
}
.profi-form-name-fields input {
flex: 1;
} .profi-form-radio-group,
.profi-form-checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.profi-form-radio,
.profi-form-checkbox {
display: flex;
align-items: center;
cursor: pointer;
padding: 8px 12px;
border-radius: 6px;
transition: background 0.3s ease;
}
.profi-form-radio:hover,
.profi-form-checkbox:hover {
background: #f8f9fa;
}
.profi-form-radio input[type="radio"],
.profi-form-checkbox input[type="checkbox"] {
width: auto;
margin-right: 10px;
cursor: pointer;
transform: scale(1.2);
}
.profi-form-radio span,
.profi-form-checkbox span {
font-size: 15px;
color: #555;
} .profi-form-submit {
margin-top: 30px;
}
.profi-form-submit-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 14px 40px;
font-size: 16px;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
display: inline-flex;
align-items: center;
gap: 10px;
}
.profi-form-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.profi-form-submit-btn:active {
transform: translateY(0);
}
.profi-form-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} .profi-form-messages {
margin-top: 20px;
}
.profi-form-success,
.profi-form-error {
padding: 15px 20px;
border-radius: 6px;
margin-top: 15px;
font-size: 15px;
animation: slideInDown 0.5s ease;
}
.profi-form-success {
background: linear-gradient(135deg, #d4f4dd 0%, #c8e6c9 100%);
color: #2e7d32;
border-left: 4px solid #4caf50;
}
.profi-form-error {
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
color: #c62828;
border-left: 4px solid #f44336;
} .profi-form input.error,
.profi-form textarea.error,
.profi-form select.error {
border-color: var(--pf-error) !important;
background: #fff5f5;
animation: shake 0.3s ease;
}
.profi-form-group.has-error label {
color: var(--pf-error);
} .field-error-message {
display: flex;
align-items: center;
gap: 6px;
color: var(--pf-error);
font-size: 13px;
margin-top: 6px;
padding: 8px 12px;
background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
border-left: 3px solid var(--pf-error);
border-radius: 4px;
animation: slideInDown 0.3s ease;
}
.field-error-message .error-icon {
font-size: 14px;
flex-shrink: 0;
} .success-banner,
.error-banner {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
border-radius: 8px;
margin: 15px 0;
animation: slideInDown 0.4s ease;
}
.success-banner {
background: linear-gradient(135deg, #d4f4dd 0%, #c8e6c9 100%);
border: 1px solid #a5d6a7;
color: #2e7d32;
}
.error-banner {
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
border: 1px solid #ef9a9a;
color: #c62828;
}
.success-banner .success-icon,
.error-banner .error-icon {
font-size: 20px;
flex-shrink: 0;
}
.success-content,
.error-content {
flex: 1;
}
.success-content strong,
.error-content strong {
display: block;
margin-bottom: 4px;
font-size: 16px;
}
.success-content p,
.error-content p {
margin: 0;
font-size: 14px;
opacity: 0.9;
} .spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ffffff;
border-radius: 50%;
border-top-color: transparent;
animation: spin 0.8s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .profi-form [required]:invalid:not(:focus) {
border-color: var(--pf-warning);
}
.profi-form [required]:valid {
border-color: var(--pf-success);
} .profi-form input.valid,
.profi-form textarea.valid,
.profi-form select.valid {
border-color: var(--pf-success);
background: #f0fdf4;
} .profi-form input.error:focus,
.profi-form textarea.error:focus,
.profi-form select.error:focus {
box-shadow: 0 0 0 3px rgba(245, 101, 101, 0.1);
}
.profi-form input.valid:focus,
.profi-form textarea.valid:focus,
.profi-form select.valid:focus {
box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
} .profi-form input[type="file"] {
padding: 10px;
background: #f8f9fa;
border-style: dashed;
}
.profi-form input[type="file"]:hover {
background: #e9ecef;
} .profi-form select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L2 5h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
} @keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
} @media screen and (max-width: 768px) {
.profi-form {
padding: 20px;
}
.profi-form-name-fields {
flex-direction: column;
gap: 0;
}
.profi-form-submit-btn {
width: 100%;
justify-content: center;
}
.profi-form-radio-group,
.profi-form-checkbox-group {
gap: 8px;
}
}
@media screen and (max-width: 480px) {
.profi-form {
padding: 15px;
border-radius: 8px;
}
.profi-form-group {
margin-bottom: 20px;
}
.profi-form input[type="text"],
.profi-form input[type="email"],
.profi-form input[type="tel"],
.profi-form input[type="date"],
.profi-form textarea,
.profi-form select {
padding: 10px 14px;
font-size: 14px;
}
.profi-form-submit-btn {
padding: 12px 30px;
font-size: 15px;
}
} @media (prefers-color-scheme: dark) {
.profi-form {
background: #1a1a1a;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.profi-form-group label {
color: #e0e0e0;
}
.profi-form input[type="text"],
.profi-form input[type="email"],
.profi-form input[type="tel"],
.profi-form input[type="date"],
.profi-form input[type="file"],
.profi-form textarea,
.profi-form select {
background: #2a2a2a;
border-color: #444;
color: #e0e0e0;
}
.profi-form input[type="text"]:focus,
.profi-form input[type="email"]:focus,
.profi-form input[type="tel"]:focus,
.profi-form input[type="date"]:focus,
.profi-form textarea:focus,
.profi-form select:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.profi-form-radio:hover,
.profi-form-checkbox:hover {
background: #333;
}
.profi-form-radio span,
.profi-form-checkbox span {
color: #b0b0b0;
}
} .profi-form.loading {
position: relative;
pointer-events: none;
}
.profi-form.loading::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
} .profi-form *:focus-visible {
outline: 2px solid #4a90e2;
outline-offset: 2px;
}
.profi-form input[type="radio"]:focus-visible,
.profi-form input[type="checkbox"]:focus-visible {
outline-offset: 0;
} @media print {
.profi-form {
box-shadow: none;
border: 1px solid #ddd;
}
.profi-form-submit {
display: none;
}
}