.eaf-fields {
margin: 22px 0;
padding: 18px;
border: 1px solid #e5e7eb;
border-radius: 16px;
background: #ffffff;
}
.eaf-bootstrap-row {
display: flex;
flex-wrap: wrap;
margin-left: -12px;
margin-right: -12px;
}
.eaf-bootstrap-col {
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
width: 100%;
}
.eaf-col-date,
.eaf-col-right {
flex: 0 0 50%;
max-width: 50%;
}
.eaf-fields .eaf-field {
margin-bottom: 16px;
}
.eaf-fields .eaf-field:last-child {
margin-bottom: 0;
}
.eaf-fields label {
display: block;
font-weight: 700;
margin-bottom: 8px;
color: #1f2937;
}
.eaf-required {
color: #b91c1c;
}
.eaf-fields input[type="text"],
.eaf-fields select,
.eaf-fields textarea {
width: 100%;
max-width: 100%;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 11px 12px;
font-size: 15px;
background: #ffffff;
box-sizing: border-box;
color: #111827;
}
.eaf-fields textarea {
resize: vertical;
min-height: 118px;
}
.eaf-field-card-message textarea {
min-height: 118px;
}
.eaf-field-wreath-phrase textarea {
min-height: 96px;
max-height: 120px;
}
.eaf-help {
font-size: 13px;
color: #6b7280;
margin: 6px 0 0;
}
.eaf-date-legend {
margin-top: 9px;
font-size: 14px;
color: #374151;
}
.eaf-time-options {
display: grid;
gap: 6px;
}
.eaf-time-placeholder,
.eaf-no-slots {
margin: 0;
padding: 8px 10px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
color: #6b7280;
font-size: 14px;
}
.eaf-time-option {
display: flex !important;
align-items: center;
gap: 7px;
border: 1px solid #d1d5db;
border-radius: 10px;
padding: 7px 9px;
cursor: pointer;
background: #ffffff;
transition: all .15s ease;
font-weight: 500 !important;
margin: 0;
font-size: 14px;
line-height: 1.25;
}
.eaf-time-option:hover {
border-color: #9ca3af;
background: #f9fafb;
}
.eaf-time-option input {
margin: 0;
}
.eaf-time-option-disabled {
opacity: .62;
cursor: not-allowed;
background: #f3f4f6;
color: #6b7280;
}
.eaf-time-option-disabled:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.eaf-datepicker-inline .ui-datepicker {
width: 100%;
max-width: 320px;
padding: 6px;
border: 1px solid #a3a3a3;
border-radius: 4px;
background: #ffffff;
font-size: 13px;
box-shadow: none;
box-sizing: border-box;
position: static !important;
display: block !important;
}
.eaf-datepicker-inline .ui-datepicker-header {
position: relative;
padding: 6px 34px;
border: 1px solid #bdbdbd;
border-radius: 4px;
background: linear-gradient(#eeeeee, #cfcfcf);
color: #222222;
font-weight: 700;
}
.eaf-datepicker-inline .ui-datepicker-title {
text-align: center;
font-weight: 800;
font-size: 15px;
line-height: 22px;
}
.eaf-datepicker-inline .ui-datepicker-prev,
.eaf-datepicker-inline .ui-datepicker-next {
position: absolute;
top: 6px;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
text-align: center;
background: #4b5563;
color: #ffffff;
text-decoration: none;
}
.eaf-datepicker-inline .ui-datepicker-prev {
left: 8px;
}
.eaf-datepicker-inline .ui-datepicker-next {
right: 8px;
}
.eaf-datepicker-inline .ui-datepicker-prev span,
.eaf-datepicker-inline .ui-datepicker-next span {
display: none;
}
.eaf-datepicker-inline .ui-datepicker-prev:before {
content: "‹";
display: block;
font-size: 18px;
line-height: 18px;
color: #ffffff;
}
.eaf-datepicker-inline .ui-datepicker-next:before {
content: "›";
display: block;
font-size: 18px;
line-height: 18px;
color: #ffffff;
}
.eaf-datepicker-inline .ui-datepicker-calendar {
width: 100%;
border-collapse: separate;
border-spacing: 3px;
margin: 8px 0 0;
table-layout: fixed;
}
.eaf-datepicker-inline .ui-datepicker-calendar th {
font-size: 10px;
color: #111827;
font-weight: 800;
padding: 4px 0;
text-align: center;
}
.eaf-datepicker-inline .ui-datepicker-calendar td {
text-align: center;
padding: 0;
}
.eaf-datepicker-inline .ui-datepicker-calendar a,
.eaf-datepicker-inline .ui-datepicker-calendar span {
display: block;
min-height: 26px;
line-height: 26px;
border-radius: 2px;
text-decoration: none !important;
color: #374151;
border: 1px solid #d1d5db;
background: #f5f5f5;
box-sizing: border-box;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-available a {
background: #f3f4f6;
border-color: #d1d5db;
color: #374151;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-available a:hover {
background: #e5e7eb;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-unavailable a {
background: #fee2e2;
border: 1px solid #fecaca;
border-radius: 6px;
color: #991b1b;
}
.eaf-datepicker-inline .ui-datepicker-calendar .ui-datepicker-current-day a {
background: #2f8f2f !important;
border-color: #2f8f2f !important;
color: #ffffff !important;
font-weight: 800;
border-radius: 6px;
}
.eaf-datepicker-inline .ui-datepicker-calendar .ui-datepicker-today a {
font-weight: 800;
}
.eaf-datepicker-inline .ui-datepicker-calendar .ui-state-disabled span {
opacity: .45;
background: #f3f4f6;
color: #9ca3af;
}
@media (max-width: 767px) {
.eaf-col-date,
.eaf-col-right {
flex: 0 0 100%;
max-width: 100%;
}
.eaf-datepicker-inline .ui-datepicker {
max-width: 100%;
}
}
.eaf-field-time-wreath .eaf-time-options {
display: block;
}
.eaf-wreath-time-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.eaf-wreath-time-row .eaf-wreath-time-label {
display: inline-flex;
align-items: center;
gap: 3px;
margin: 0 4px 0 0;
font-weight: 700;
color: #1f2937;
}
.eaf-wreath-time-row select {
width: auto;
min-width: 76px;
max-width: 90px;
padding: 9px 10px;
border-radius: 10px;
}
.eaf-time-separator {
font-weight: 800;
color: #1f2937;
}
.eaf-field-deceased-name label,
.eaf-field-chapel label,
.eaf-field-wreath-phrase label,
.eaf-field-cemetery label {
display: block !important;
width: 100%;
margin-bottom: 8px;
}
.eaf-field-deceased-name input,
.eaf-field-chapel input {
display: block;
width: 100%;
}
.eaf-field-wreath-phrase textarea {
min-height: 72px;
max-height: 96px;
}
@media (max-width: 480px) {
.eaf-wreath-time-row {
gap: 6px;
}
.eaf-wreath-time-row select {
min-width: 70px;
}
} .eaf-date-legend {
padding: 10px 12px;
background: linear-gradient(180deg, #fffdfd 0%, #faf3f1 100%);
border: 1px solid #f0e3de;
border-radius: 10px;
color: #374151;
}
.eaf-date-legend:before,
.eaf-date-legend:after {
content: none !important;
display: none !important;
}
.eaf-datepicker-inline .ui-datepicker {
background: linear-gradient(180deg, #fffefe 0%, #fffaf8 100%);
border-color: #e6ddd8;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}
.eaf-datepicker-inline .ui-datepicker-header {
background: linear-gradient(180deg, #fff8fb 0%, #f8f1ec 100%);
border-color: #eaded8;
border-radius: 10px;
}
.eaf-datepicker-inline .ui-datepicker-title {
font-size: 18px;
line-height: 1.2;
color: #2b2a34;
}
.eaf-datepicker-inline .ui-datepicker-prev,
.eaf-datepicker-inline .ui-datepicker-next {
background: #fff1f5;
color: #5c6470;
}
.eaf-datepicker-inline .ui-datepicker-prev:before,
.eaf-datepicker-inline .ui-datepicker-next:before {
color: #5c6470;
}
.eaf-datepicker-inline .ui-datepicker-calendar a,
.eaf-datepicker-inline .ui-datepicker-calendar span {
background: #fffefe;
border-color: #d9e2cf;
border-radius: 8px;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-available a {
background: #fffefe;
border-color: #d9e2cf;
color: #2f3640;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-available a:hover {
background: #f4f8ef;
border-color: #c7d5b7;
}
.eaf-datepicker-inline .ui-datepicker-calendar .eaf-date-unavailable a {
background: #fff2f2;
border-color: #f3c9c9;
color: #b33b3b;
}
.eaf-datepicker-inline .ui-datepicker-calendar .ui-datepicker-current-day a {
background: #dbe8c6 !important;
border-color: #c8d8ae !important;
color: #111827 !important;
font-weight: 800;
}