/*
 * Netcreator Click-to-Message Forms — Frontend Styles
 * Clean modern form layout, focus states, hover states
 */

.chat-form-wrapper {
max-width: 640px;
margin: 24px auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
color: #1d2327;
}

.chat-form-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(17, 24, 39, 0.06);
}

.chat-form-header {
padding: 22px 24px 18px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #fff;
}

.chat-form-header__title {
margin: 0 0 4px;
font-size: 20px;
font-weight: 700;
line-height: 1.25;
color: #fff;
}

.chat-form-header__subtitle {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}

.chat-form-body {
padding: 24px;
}

.chat-form-intro {
margin: 0 0 20px;
padding: 12px 14px;
background: #f3f4f6;
border-left: 4px solid #25D366;
border-radius: 6px;
font-size: 14px;
line-height: 1.55;
color: #374151;
}

.chat-form-field {
margin: 0 0 20px;
}

.chat-form-field:last-child {
margin-bottom: 0;
}

.chat-form-field__label {
display: block;
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
color: #111827;
}

.chat-form-field__required {
color: #dc2626;
margin-left: 3px;
font-weight: 700;
}

.chat-form-field__input,
.chat-form-field__textarea,
.chat-form-field__select {
display: block;
width: 100%;
box-sizing: border-box;
font-family: inherit;
font-size: 15px;
line-height: 1.5;
color: #111827;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
-webkit-appearance: none;
appearance: none;
}

.chat-form-field__textarea {
min-height: 130px;
resize: vertical;
}

.chat-form-field__select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12L6 8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}

.chat-form-field__input::placeholder,
.chat-form-field__textarea::placeholder {
color: #9ca3af;
}

.chat-form-field__input:hover,
.chat-form-field__textarea:hover,
.chat-form-field__select:hover {
border-color: #9ca3af;
}

.chat-form-field__input:focus,
.chat-form-field__textarea:focus,
.chat-form-field__select:focus {
outline: 0;
border-color: #25D366;
background: #ffffff;
box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
}

.chat-form-choice-group {
display: grid;
gap: 10px;
}

.chat-form-choice-group .chat-form-choice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fafafa;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-form-choice-group .chat-form-choice:hover {
border-color: #25D366;
background: #ecfdf5;
}

.chat-form-choice-group .chat-form-choice input {
margin-top: 3px;
accent-color: #25D366;
}

.chat-form-choice-group .chat-form-choice span {
font-size: 14px;
line-height: 1.45;
color: #111827;
}

.chat-form-single-checkbox {
display: inline-flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 10px;
background: #fafafa;
cursor: pointer;
}

.chat-form-single-checkbox input {
margin-top: 3px;
accent-color: #25D366;
}

.chat-form-submit {
margin-top: 28px;
}

.chat-form-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
padding: 14px 20px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1.2;
color: #fff;
background: linear-gradient(180deg, #25D366 0%, #1fb855 100%);
border: 0;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.chat-form-btn:hover {
filter: brightness(1.04);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.42);
transform: translateY(-1px);
}

.chat-form-btn:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(37, 211, 102, 0.28);
}

.chat-form-btn:focus-visible {
outline: 0;
box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.25), 0 4px 14px rgba(37, 211, 102, 0.32);
}

.chat-form-btn__icon {
display: inline-block;
width: 20px;
height: 20px;
flex-shrink: 0;
}

@media (max-width: 480px) {
.chat-form-header {
padding: 18px 18px 14px;
}
.chat-form-header__title {
font-size: 18px;
}
.chat-form-body {
padding: 18px;
}
.chat-form-btn {
padding: 13px 16px;
font-size: 14px;
}
}