/** * OMS Forms — minimale styles voor field-error UX. * Themes mogen alles overrulen. */ .oms-form .oms-form__row--error input, .oms-form .oms-form__row--error textarea, .oms-form .oms-form__row--error select, .oms-form .oms-field-error { border-color: #d92d20 !important; box-shadow: 0 0 0 1px #d92d20; outline-color: #d92d20; } .oms-form .oms-form__error { display: block; margin-top: 4px; color: #d92d20; font-size: 0.85em; line-height: 1.4; } .oms-form input[aria-invalid="true"], .oms-form textarea[aria-invalid="true"], .oms-form select[aria-invalid="true"] { border-color: #d92d20 !important; } /** * Google Places autocomplete — eigen suggestielijst (.oms-pac) in de huisstijl. * De dropdown wordt door oms-forms-places.js aan gehangen. Positionering * (top/left/width/display) blijft inline in de JS; het uiterlijk regelen we hier. * Tokens met fallback zodat elke OMS-site z'n eigen kleuren pakt. */ .oms-pac { background: var(--white, #fff); border: 1px solid var(--border, #e0e0e0); border-radius: var(--r8, 8px); box-shadow: var(--sh2, 0 4px 20px rgba(0, 0, 0, .12)); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 4px; } .oms-pac__item { position: relative; display: block; padding: 9px 12px 9px 38px; border-radius: var(--r4, 4px); line-height: 1.4; cursor: pointer; transition: background-color .15s ease; } .oms-pac__item:hover, .oms-pac__item--active { background-color: var(--bg-light, #f5f7fa); /* fallback voor oudere browsers */ background-color: color-mix(in srgb, var(--green, #1a7a3a) 10%, transparent); } .oms-pac__item::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-color: var(--green, #1a7a3a); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; } .oms-pac__main { font-size: 0.95rem; font-weight: 600; color: var(--text, #333); } .oms-pac__sub { display: block; font-size: 0.82rem; color: var(--text-light, #666); }