#prepayment-form {
background: var(--form-bg);
color: var(--form-text);
font-family: var(--form-font);
padding: 20px;
border-radius: var(--form-radius);
line-height: 1.5;
}
.is-hidden { display: none !important; } .multi-form-title-color { color: var(--titles-color); }
.question-title {
font-weight: 700;
display: block;
margin: 0 0 4px;
line-height: 1.25;
}
.req { color: red; } #prepayment-form input[type="text"],
#prepayment-form input[type="email"],
#prepayment-form input[type="date"],
#prepayment-form select,
#prepayment-form textarea {
width: 100%;
padding: 10px;
border: var(--form-input-border);
border-radius: var(--form-radius);
background: #fff;
color: var(--form-text);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#prepayment-form input[type="text"]::placeholder,
#prepayment-form input[type="email"]::placeholder,
#prepayment-form input[type="date"]::placeholder,
#prepayment-form select::placeholder,
#prepayment-form textarea::placeholder {
color: rgba(0,0,0,.4);
}
#prepayment-form input[type="text"]:focus-visible,
#prepayment-form input[type="email"]:focus-visible,
#prepayment-form input[type="date"]:focus-visible,
#prepayment-form select:focus-visible,
#prepayment-form textarea:focus-visible {
outline: none;
border-color: var(--btn-bg);
box-shadow: 0 0 0 3px rgba(var(--btn-bg-rgb), 0.15);
} .field-hint {
font-size: 12px;
margin-top: 6px;
color: #64748b;
}
.field-hint.is-error { color: #c62828; } .appointment-selection {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
}
.appointment-calendar {
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
background: #fff;
}
.appointment-calendar__header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.appointment-calendar__nav {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.calendar-nav {
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid transparent;
background: var(--calendar-nav-bg, var(--btn-bg));
color: var(--calendar-nav-text, var(--btn-text));
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.calendar-nav:hover {
box-shadow: 0 6px 14px var(--calendar-nav-shadow, rgba(var(--btn-bg-rgb), 0.2));
filter: brightness(0.98);
}
.calendar-nav:disabled {
opacity: 0.5;
background: #e2e8f0;
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
}
.appointment-calendar__filters {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #f8fafc;
}
.appointment-calendar__filters.is-hidden { display: none; }
.appointment-practitioner-block {
margin: 10px 0 16px;
}
.appointment-calendar__label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.appointment-calendar__select {
width: 100%;
padding: 8px 10px;
border: 1px solid #e2e8f0;
border-radius: 10px;
background: #fff;
color: var(--form-text);
font-size: 13px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.appointment-calendar__select:focus-visible {
outline: none;
border-color: var(--btn-bg);
box-shadow: 0 0 0 3px rgba(var(--btn-bg-rgb), 0.15);
}
.appointment-calendar__select:disabled {
background: #f1f5f9;
color: #94a3b8;
}
.appointment-calendar__month {
font-weight: 700;
font-size: 16px;
color: var(--calendar-accent, var(--titles-color));
}
.appointment-calendar__legend {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.calendar-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
color: #475569;
}
.calendar-legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.calendar-legend-dot--morning { background: #0ea5e9; }
.calendar-legend-dot--afternoon { background: #f59e0b; }
.calendar-legend-dot--evening { background: #ef4444; }
.appointment-calendar__weekdays {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
margin-bottom: 8px;
}
.appointment-calendar__weekdays span {
text-align: center;
}
.appointment-calendar__grid {
display: grid;
grid-template-columns: repeat(7, minmax(28px, 1fr));
gap: 6px;
position: relative;
transition: opacity 0.25s ease;
}
.appointment-calendar__grid.is-loading {
opacity: 0.55;
pointer-events: none;
}
.appointment-calendar__grid.is-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
margin: -18px 0 0 -8px;
border: 2px solid #cbd5e1;
border-top-color: var(--btn-bg);
border-radius: 50%;
animation: calendarSpin 0.7s linear infinite;
z-index: 2;
}
.appointment-calendar__grid.is-loading::after {
content: 'Updating…';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: #64748b;
background: rgba(255, 255, 255, 0.65);
border-radius: 12px;
z-index: 1;
}
@keyframes calendarSpin {
to { transform: rotate(360deg); }
}
.calendar-day {
border: 1px solid #e5e7eb;
border-radius: 8px;
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
padding: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
background: #fff;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
.calendar-day.is-blank {
background: transparent;
border: none;
cursor: default;
}
.calendar-day.is-disabled {
opacity: 0.5;
cursor: not-allowed;
background: #f8fafc;
}
.calendar-day:hover:not(.is-blank):not(.is-disabled) {
border-color: var(--calendar-accent, var(--btn-bg));
box-shadow: 0 8px 20px var(--calendar-accent-soft, rgba(var(--btn-bg-rgb), 0.12));
transform: translateY(-1px);
}
.calendar-day.is-selected {
border-color: var(--calendar-accent, var(--btn-bg));
box-shadow: 0 10px 26px var(--calendar-accent-soft, rgba(var(--btn-bg-rgb), 0.18));
}
.calendar-day.is-today {
border-color: var(--calendar-accent, rgba(var(--btn-bg-rgb), 0.5));
}
.calendar-day__number {
font-weight: 700;
font-size: 12px;
color: var(--calendar-accent, var(--titles-color));
}
.calendar-day__periods {
display: flex;
gap: 3px;
flex-wrap: wrap;
}
.calendar-period {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(0,0,0,0.08);
}
.calendar-period.is-active {
opacity: 1;
}
.appointment-day-times {
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
background: #fff;
}
.appointment-day-times__title {
font-weight: 700;
font-size: 14px;
margin-bottom: 10px;
color: var(--titles-color);
}
.appointment-day-times__hint {
font-size: 12px;
color: #64748b;
margin: -6px 0 12px;
}
.appointment-day-times__placeholder {
border: 1px dashed #e2e8f0;
border-radius: 14px;
padding: 18px 16px;
text-align: center;
color: #64748b;
background: #f8fafc;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.appointment-day-times__placeholder.is-hidden { display: none; }
.appointment-day-times__placeholder i {
font-size: 22px;
color: var(--calendar-accent, var(--btn-bg));
}
.appointment-day-times__placeholder-title {
font-weight: 700;
font-size: 13px;
color: var(--titles-color);
}
.appointment-day-times__placeholder-text {
font-size: 12px;
color: #64748b;
max-width: 220px;
}
.appointment-day-times.is-placeholder .appointment-day-times__groups,
.appointment-day-times.is-placeholder .appointment-day-times__empty {
display: none;
}
.appointment-day-times.is-loading .appointment-day-times__groups,
.appointment-day-times.is-loading .appointment-day-times__empty {
display: none;
}
.appointment-day-times__loading {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #f8fafc;
color: #475569;
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.appointment-day-times__loading.is-hidden { display: none; }
.appointment-day-times__spinner {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #cbd5e1;
border-top-color: var(--calendar-accent, var(--btn-bg));
animation: calendarSpin 0.7s linear infinite;
}
.appointment-day-times__groups {
display: flex;
flex-direction: column;
gap: 14px;
}
.appointment-day-times__group {
display: flex;
flex-direction: column;
}
.appointment-day-times__group-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-bottom: 6px;
}
.appointment-day-times__group-slots {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: #475569;
}
.appointment-day-times__empty {
font-size: 13px;
color: #94a3b8;
margin-top: 4px;
}
.appointment-day-times__empty.is-hidden { display: none; }
.appointment-time-slot {
border: 1px solid var(--slot-accent, var(--btn-bg));
background: #fff;
color: var(--slot-accent, var(--btn-bg));
border-radius: 999px;
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.appointment-time-slot:hover {
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
background: var(--slot-accent-soft, rgba(var(--btn-bg-rgb), 0.08));
}
.appointment-time-slot.is-selected {
background: var(--slot-accent, var(--btn-bg));
color: #fff;
}
.calendar-period--morning { background: rgba(14,165,233,0.35); }
.calendar-period--afternoon { background: rgba(245,158,11,0.35); }
.calendar-period--evening { background: rgba(239,68,68,0.35); }
.calendar-period--morning.is-active { background: #0ea5e9; }
.calendar-period--afternoon.is-active { background: #f59e0b; }
.calendar-period--evening.is-active { background: #ef4444; }
@media (max-width: 720px) {
.appointment-selection {
grid-template-columns: 1fr;
}
.appointment-calendar__grid {
gap: 4px;
}
} .field-error {
color: #f44336;
font-size: 12px;
margin-top: 4px;
}  .inputGroup { 
margin-bottom: 16px;
display: flex;
flex-direction: column;
gap: 6px;
} #prepayment-form .inputGroup label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
line-height: 1.3; } #prepayment-form .inputGroup label > span {
display: inline-block;
line-height: 1.3;
} #prepayment-form input[type="checkbox"],
#prepayment-form input[type="radio"] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
box-sizing: border-box;
outline: none;
margin: 0;
padding: 0;
cursor: pointer;
position: relative; display: inline-block; vertical-align: middle;
width: 20px;
height: 20px;
border: 2px solid var(--btn-bg);
background-color: #fff;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
} #prepayment-form input[type="checkbox"]:hover,
#prepayment-form input[type="radio"]:hover {
box-shadow: 0 0 0 3px rgba(var(--btn-bg-rgb), 0.12);
} #prepayment-form input[type="checkbox"]:focus-visible,
#prepayment-form input[type="radio"]:focus-visible {
box-shadow: 0 0 0 3px rgba(var(--btn-bg-rgb), 0.18);
} #prepayment-form input[type="checkbox"] {
border-radius: 6px;
flex-shrink: 0;
} #prepayment-form input[type="radio"] {
border-radius: 50%;
} #prepayment-form input[type="checkbox"]:checked,
#prepayment-form input[type="radio"]:checked {
background-color: var(--btn-bg);
border-color: var(--btn-bg);
} #prepayment-form input[type="checkbox"]::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translate(-50%, -55%) rotate(45deg) scale(0);
transform-origin: center;
transition: transform 0.15s ease;
}
#prepayment-form input[type="checkbox"]:checked::after {
transform: translate(-50%, -55%) rotate(45deg) scale(1);
} #prepayment-form input[type="radio"]::after {
content: '';
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%) scale(0);
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
transition: transform 0.15s ease;
}
#prepayment-form input[type="radio"]:checked::after {
transform: translate(-50%, -50%) scale(1);
} .options-group { 
display: flex;
flex-direction: column;
gap: 6px;
} .other-input-wrap {
display: none;
margin: 6px 0 0 28px; }
.other-input-wrap input[type="text"] {
max-width: 420px;
} .signature {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.signature-pad {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 420px;
height: 150px;
} #form-progress-indicator {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
} .progress-step {
width: 30px;
height: 30px;
border-radius: 50%;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--btn-bg);
color: var(--btn-bg);
background: #fff;
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.progress-step.is-active {
background: var(--btn-bg);
color: #fff;
border-color: var(--btn-bg);
}
.form-progress__divider {
flex: 1 1 0;
height: 2px;
background: var(--progress-divider, #babfc5);
} .form-progress--bar {
width: 100%;
}
.form-progress--bar .progress-track {
width: 100%;
height: 8px;
border-radius: 4px;
background: var(--progress-divider, #e5e7eb);
overflow: hidden;
}
.form-progress--bar .progress-fill {
height: 100%;
background: var(--btn-bg);
transition: width 0.3s ease;
} .form-progress--dots {
gap: 8px;
}
.form-progress--dots .progress-dot {
width: 12px;
height: 12px;
background: var(--progress-divider, #cbd5e1);
border-radius: 50%;
transition: background-color 0.25s ease;
}
.form-progress--dots .progress-dot.is-active {
background: var(--btn-bg);
} .form-progress--steps .form-progress__divider {
background: var(--progress-divider, #babfc5);
} .form-progress--fraction .progress-text {
font-weight: 600;
font-size: 14px;
color: var(--btn-bg);
} .form-progress--percentage .progress-text {
font-weight: 600;
font-size: 14px;
color: var(--btn-bg);
} .form-progress--bar .progress-fill {
background: var(--btn-bg, #5EB192);
}
.form-progress--dots .progress-dot.is-active {
background: var(--btn-bg, #5EB192);
}
.form-progress--fraction .progress-text,
.form-progress--percentage .progress-text {
color: var(--btn-bg, #5EB192);
} .patient-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 16px;
}
.field-col { display: flex; flex-direction: column; }
.field-label {
font-weight: 700;
margin-bottom: 4px;
color: var(--form-label);
} .col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; } @media (max-width: 768px) {
.patient-grid [class*="col-span-"] { grid-column: span 12 !important; }
} .multi-form-button {
padding: var(--btn-pad);
font-size: 16px;
font-weight: 600;
min-height: 44px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--btn-radius);
flex: var(--btn-flex);
gap: var(--btn-icon-gap);
border: 1px solid transparent;
transition: transform 0.05s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.multi-form-button:active { transform: translateY(1px); }
.multi-form-button.prev-button {
background: #fff;
color: var(--btn-bg);
border-color: var(--btn-bg);
}
.multi-form-button.prev-button:hover {
box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.multi-form-button.next-button {
background: var(--btn-bg);
color: var(--btn-text);
border: none;
}
.multi-form-button.next-button:hover {
box-shadow: 0 6px 16px rgba(var(--btn-bg-rgb), .24);
} .form-actions {
margin-top: 28px;
width: 100%;
display: flex;
flex-direction: var(--actions-direction);
justify-content: var(--actions-justify);
align-items: stretch;
gap: 8px;
flex-wrap: wrap;
} @media (max-width: 440px) {
.form-actions { flex-direction: column; }
.multi-form-button { width: 100%; }
}