@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&family=Poppins:wght@400;500;600&display=swap');

/* Maratime Knitting Cruises EmailMeForm theme, matched to maratimeknittingcruises.com.
Site: sage #DDE9E8 and beige #E2E2DA sections, charcoal #444143 text, Manrope headings, Poppins body, charcoal pill buttons with sage text.
Logo magenta #CE2D8F kept for required marks only. */

/* Full page sage, so the color does not stop partway down the screen */
html, body, #emf-container-outer {
background: #DDE9E8 !important;
color: #444143 !important;
min-height: 100% !important;
}
html, body { height: auto !important; }
body { min-height: 100vh !important; margin: 0 !important; }
#emf-container-outer { border: 0 !important; padding: 40px 0 !important; }

/* One font everywhere, including text pasted into fields with its own font */
#emf-container, #emf-container * { font-family: "Poppins", Arial, Helvetica, sans-serif !important; }

#emf-container {
background: #FFFFFF !important;
border: 0 !important;
border-radius: 20px !important;
box-shadow: none !important;
overflow: hidden !important;
font-size: 15px !important;
color: #444143 !important;
}
#emf-form-shadows { display: none !important; }

/* Header logo in the Logo slot */
#emf-logo { margin: 0 !important; padding: 0 !important; text-align: center !important; background: #FFFFFF !important; }
#emf-logo a, #emf-logo img { display: block !important; margin: 0 auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 640 / 102; background-size: 100% auto !important; background-position: center top !important; background-repeat: no-repeat !important; border: 0 !important; }

/* Title block */
#emf-form { padding-left: 0 !important; padding-right: 0 !important; }
#emf-form-instruction { padding: 24px 32px 12px !important; margin: 0 !important; background: transparent !important; border: 0 !important; }
#emf-container #emf-form-title { font-family: "Manrope", "Poppins", Arial, sans-serif !important; font-size: 28px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; line-height: 1.2 !important; color: #444143 !important; }
#emf-form-description { font-size: 15px !important; line-height: 1.6 !important; color: #444143 !important; font-style: normal !important; margin-top: 10px !important; }
#emf-form-description a, .emf-section-text a, .emf-div-instruction a { color: #444143 !important; text-decoration: underline !important; }

/* Page steps: lined up with the content, one divider only */
#emf-page-info { padding: 8px 32px 4px !important; margin: 0 !important; border: 0 !important; }
.emf-steps { width: 100% !important; }
.emf-steps td { color: #444143 !important; font-size: 13px !important; border: 0 !important; }
.emf-steps .emf-page-number { width: 26px !important; height: 26px !important; line-height: 24px !important; box-sizing: border-box !important; border: 1px solid #444143 !important; border-radius: 50% !important; background: #FFFFFF !important; color: #444143 !important; font-size: 13px !important; font-weight: 500 !important; box-shadow: none !important; }
.emf-steps .emf-page-number.emf-selected { background: #444143 !important; color: #DDE9E8 !important; }
.emf-steps .emf-page-label { color: #444143 !important; }

/* Fields */
#emf-form ul, #emf-form ol { padding: 0 32px 6px !important; margin: 0 !important; }
li.emf-li-field { padding: 10px 0 !important; }
label.emf-label-desc, .emf-label-desc { font-weight: 500 !important; font-size: 15px !important; color: #444143 !important; margin: 6px 0 8px !important; }
label.emf-label-desc span, .emf-required, .emf-label-desc .emf-required { color: #CE2D8F !important; }
.emf-div-instruction, p.emf-div-instruction { font-size: 13px !important; line-height: 1.5 !important; color: #6E6A6C !important; font-weight: normal !important; margin-top: 4px !important; }
label.emf-block.emf-text-center { font-size: 12px !important; color: #6E6A6C !important; font-weight: normal !important; }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], textarea, select,
#emf-form input.validate, #emf-form textarea.validate, #emf-form select.validate {
font-size: 15px !important;
color: #444143 !important;
background: #FFFFFF !important;
border: 1px solid #444143 !important;
border-radius: 10px !important;
padding: 0 12px !important;
height: 44px !important;
line-height: 44px !important;
box-shadow: none !important;
}
textarea, #emf-form textarea.validate { height: auto !important; line-height: 1.5 !important; padding: 10px 12px !important; min-height: 100px !important; }
select, #emf-form select.validate { padding: 0 8px !important; }
input:focus, textarea:focus, select:focus { border-color: #444143 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(68,65,67,.18) !important; }

/* Segmented inputs (date, time, phone): EmailMeForm uses narrow emf-input-w20/w30/w40 boxes with bottom labels, so no side padding and fixed widths */
li.emf-field-datetime .emf-div-field > span, li.emf-field-phone .emf-div-field > span, li.emf-field-time .emf-div-field > span { display: inline-block !important; width: auto !important; vertical-align: top !important; }
li.emf-field-datetime .emf-div-field input[type=text], li.emf-field-phone .emf-div-field input[type=text], li.emf-field-time .emf-div-field input[type=text],
#emf-form input.emf-input-w20, #emf-form input.emf-input-w30, #emf-form input.emf-input-w40, #emf-form input.emf-input-w50 { padding: 0 4px !important; text-align: center !important; }
#emf-form input.emf-input-w20 { width: 48px !important; }
#emf-form input.emf-input-w30 { width: 64px !important; }
#emf-form input.emf-input-w40 { width: 80px !important; }
#emf-form input.emf-input-w50 { width: 100px !important; }
li.emf-field-phone .emf-div-field input[type=text]:not(.emf-input-w20):not(.emf-input-w30):not(.emf-input-w40):not(.emf-input-w50) { width: 100% !important; max-width: 320px !important; padding: 0 12px !important; text-align: left !important; }
li.emf-field-datetime .emf-sep, li.emf-field-phone .emf-sep, li.emf-field-time .emf-sep { display: inline-block !important; line-height: 44px !important; width: 14px !important; text-align: center !important; color: #6E6A6C !important; }
.emf-bottom-label, label.emf-bottom-label { display: block !important; font-size: 12px !important; color: #6E6A6C !important; text-align: center !important; font-weight: normal !important; margin-top: 2px !important; }
li.emf-field-datetime .datepicker, li.emf-field-datetime img.ui-datepicker-trigger { margin-top: 14px !important; vertical-align: top !important; }

/* Section breaks */
.emf-section-separator { border-top: 1px solid #C9D3D2 !important; border-bottom: 0 !important; margin: 12px 0 16px !important; }
#emf-container .emf-div-field-section h3 { font-family: "Manrope", "Poppins", Arial, sans-serif !important; font-size: 22px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #444143 !important; margin: 4px 0 !important; }
.emf-section-text { font-size: 14px !important; color: #6E6A6C !important; line-height: 1.5 !important; }

/* Radio and checkbox tiles. EmailMeForm wraps each option as div.one_column, .two_column, .three_column or .side_by_side > div > input + label */
li.emf-field-radio .emf-div-field::after, li.emf-field-checkbox .emf-div-field::after,
li.emf-field-radio .emf-div-field > div::after, li.emf-field-checkbox .emf-div-field > div::after { content: ""; display: table; clear: both; }
li.emf-field-radio .emf-div-field .two_column, li.emf-field-radio .emf-div-field .three_column,
li.emf-field-checkbox .emf-div-field .two_column, li.emf-field-checkbox .emf-div-field .three_column { box-sizing: border-box !important; padding-right: 8px !important; }
/* Single column tiles all run the full width so short and long answers line up */
li.emf-field-radio .emf-div-field .one_column > div, li.emf-field-checkbox .emf-div-field .one_column > div { width: 100% !important; box-sizing: border-box !important; }
li.emf-field-radio .emf-div-field .side_by_side, li.emf-field-checkbox .emf-div-field .side_by_side { display: inline-block !important; float: none !important; width: auto !important; margin: 0 8px 0 0 !important; vertical-align: top !important; }
li.emf-field-radio .emf-div-field .one_column > div, li.emf-field-checkbox .emf-div-field .one_column > div,
li.emf-field-radio .emf-div-field .two_column > div, li.emf-field-checkbox .emf-div-field .two_column > div,
li.emf-field-radio .emf-div-field .three_column > div, li.emf-field-checkbox .emf-div-field .three_column > div,
li.emf-field-radio .emf-div-field .side_by_side > div, li.emf-field-checkbox .emf-div-field .side_by_side > div {
display: flex !important; align-items: center !important; gap: 10px !important;
background: #F1F6F5 !important; border: 1px solid #DDE9E8 !important; border-radius: 10px !important;
padding: 10px 14px !important; margin: 6px 0 !important; cursor: pointer !important;
}
li.emf-field-radio .emf-div-field .side_by_side > div, li.emf-field-checkbox .emf-div-field .side_by_side > div { padding-right: 18px !important; }
li.emf-field-radio .emf-div-field .one_column > div:hover, li.emf-field-checkbox .emf-div-field .one_column > div:hover,
li.emf-field-radio .emf-div-field .two_column > div:hover, li.emf-field-checkbox .emf-div-field .two_column > div:hover,
li.emf-field-radio .emf-div-field .three_column > div:hover, li.emf-field-checkbox .emf-div-field .three_column > div:hover,
li.emf-field-radio .emf-div-field .side_by_side > div:hover, li.emf-field-checkbox .emf-div-field .side_by_side > div:hover { border-color: #444143 !important; }
li.emf-field-radio .emf-div-field .one_column > div:has(input:checked), li.emf-field-checkbox .emf-div-field .one_column > div:has(input:checked),
li.emf-field-radio .emf-div-field .two_column > div:has(input:checked), li.emf-field-checkbox .emf-div-field .two_column > div:has(input:checked),
li.emf-field-radio .emf-div-field .three_column > div:has(input:checked), li.emf-field-checkbox .emf-div-field .three_column > div:has(input:checked),
li.emf-field-radio .emf-div-field .side_by_side > div:has(input:checked), li.emf-field-checkbox .emf-div-field .side_by_side > div:has(input:checked) { background: #DDE9E8 !important; border-color: #444143 !important; }
li.emf-field-radio .emf-div-field label, li.emf-field-checkbox .emf-div-field label {
font-size: 15px !important; font-weight: normal !important; color: #444143 !important;
padding: 0 !important; margin: 0 !important; flex: 1 !important; cursor: pointer !important;
}
li.emf-field-radio .emf-allow-other input[type=text], li.emf-field-checkbox .emf-allow-other input[type=text] { margin-top: 6px !important; }
input[type=radio], input[type=checkbox] { accent-color: #444143 !important; width: 16px !important; height: 16px !important; margin: 0 !important; flex: none !important; }
/* No block highlight on the active question */
li.highlight-field, li.emf-li-field.highlight-field { background: transparent !important; }

/* Likert / grid */
.emf-field-grid { border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid #444143 !important; border-radius: 10px !important; overflow: hidden !important; }
.emf-field-grid th, .emf-field-grid td { font-size: 14px !important; color: #444143 !important; border-color: #DDE9E8 !important; padding: 8px !important; }
.emf-banding-head th, .emf-banding-head td { background: #DDE9E8 !important; color: #444143 !important; font-weight: 600 !important; }
.emf-banding-odd th, .emf-banding-odd td { background: #F7F7F3 !important; }
.emf-banding-even th, .emf-banding-even td { background: #FFFFFF !important; }

/* Notes: any HTML block using class note */
.note, .emf-field-html .note { background: #E2E2DA !important; border-left: 4px solid #444143 !important; border-radius: 10px !important; padding: 12px 14px !important; margin: 16px 0 !important; font-size: 14px !important; line-height: 1.55 !important; color: #444143 !important; }

/* Button: matches the site's charcoal pill */
#emf-li-post-button, li.emf-li-post-button { padding: 14px 0 28px !important; text-align: left !important; }
#submit_form, #emf-form input[type=submit], #emf-form input[type=button], #emf-form button, .emf-button, #emf-form .emf-btn-next, #emf-form .emf-btn-prev {
display: inline-block !important;
background: #444143 !important; color: #DDE9E8 !important;
font-size: 16px !important; font-weight: 400 !important;
border: 0 !important; border-radius: 300px !important; padding: 18px 34px !important;
height: auto !important; line-height: 1.2 !important; cursor: pointer !important; box-shadow: none !important; text-shadow: none !important;
background-image: none !important;
}
#submit_form:hover, #emf-form input[type=submit]:hover, #emf-form input[type=button]:hover, #emf-form button:hover { background: #2E2C2D !important; }
#emf-form .emf-btn-prev { background: transparent !important; color: #444143 !important; border: 1px solid #444143 !important; padding: 17px 33px !important; }

/* Validation */
.emf-tooltip, .formError, .formErrorContent { font-size: 12px !important; background: #FFF4F4 !important; color: #B3261E !important; border: 1px solid #E5B4B0 !important; border-radius: 10px !important; box-shadow: none !important; }
.formErrorArrow div { background: #FFF4F4 !important; border-color: #E5B4B0 !important; }

/* Footer: EmailMeForm renders its own footer below the card; keep it quiet on the sage page */
#emf-footer, .emf-footer, #emf-container-outer > div:last-child:not(#emf-container) {
background: transparent !important; border: 0 !important; color: #6E6A6C !important;
text-align: center !important; padding: 14px 10px !important; font-size: 12px !important; line-height: 1.5 !important;
}
#emf-footer a, .emf-footer a { color: #444143 !important; }