.demo-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 60px 24px;
}
.demo-title {
font-size: 36px;
font-weight: 700;
color: #292524;
margin-bottom: 16px;
text-align: center;
}
.demo-subtitle {
font-size: 18px;
color: #57534e;
margin-bottom: 40px;
text-align: center;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.demo-tabs {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 32px;
flex-wrap: wrap;
}
.demo-tab {
padding: 12px 20px;
border-radius: 8px;
background-color: #f5f5f4;
border: 1px solid #e7e5e4;
font-size: 14px;
font-weight: 500;
color: #292524;
cursor: pointer;
transition: all 0.2s ease;
}
.demo-tab:hover {
background-color: #e7e5e4;
}
.demo-tab.active {
background-color: #059669;
border-color: #059669;
color: white;
}
.form-container {
background-color: white;
padding: 32px;
border-radius: 12px;
border: 1px solid #e7e5e4;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 20px;
}
.warning {
background-color: #fef3c7;
padding: 16px;
border-radius: 8px;
border: 1px solid #fbbf24;
}
.warning p {
font-size: 13px;
color: #78350f;
line-height: 1.5;
margin: 0;
}
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-field label {
font-size: 14px;
font-weight: 600;
color: #292524;
}
.form-field input,
.form-field textarea,
.form-field select {
width: 100%;
padding: 12px;
font-size: 14px;
border: 1px solid #e7e5e4;
border-radius: 8px;
font-family: inherit;
outline: none;
transition: border-color 0.2s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
border-color: #059669;
}
.form-field textarea {
resize: vertical;
min-height: 120px;
}
.form-field select {
background-color: white;
cursor: pointer;
}
.submit-button {
background-color: #059669;
color: white;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.submit-button:hover:not(:disabled) {
background-color: #047857;
}
.submit-button:disabled {
background-color: #d6d3d1;
cursor: not-allowed;
}
.response-container {
background-color: #f5f5f4;
padding: 20px;
border-radius: 8px;
border: 1px solid #e7e5e4;
font-size: 14px;
color: #292524;
line-height: 1.6;
white-space: pre-wrap;
overflow-x: auto;
}
.response-container.error {
background-color: #fee2e2;
border-color: #ef4444;
color: #991b1b;
}
