/**
 * A dropdown you can type into — used by the website and by the admin panel.
 * The colours fall back to the matrimony theme when the page does not set them itself.
 */
:root {
    --pick-border: var(--border, #E8DFCC);
    --pick-text: var(--text, #2C1810);
    --pick-muted: var(--muted, #7A6A55);
    --pick-primary: var(--primary, #1B5E20);
    --pick-cream: var(--cream, #FFF8E7);
}
/* ---- A dropdown you can type into (phones and tablets) ---- */
.gwm-pick { position: relative; }
/* The real <select> stays where it is — invisible but still focusable, so the browser can
   point at it when a required field is empty. */
.gwm-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gwm-pick-btn { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    /* Exactly like the boxes beside it: same height, same border, same corners. */
    text-align: left; padding: 11px 14px; border: 2px solid var(--pick-border); border-radius: 10px; background: var(--paper, #FFFEF9);
    font: inherit; font-size: 14px; color: var(--pick-text); height: 48px; cursor: pointer; }
.gwm-pick-btn.is-empty { color: var(--muted); }
.gwm-pick-btn.is-missing { border-color: #C62828; }
.gwm-pick-btn i { color: var(--gold-dark); font-size: 13px; flex-shrink: 0; }
.gwm-pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gwm-sheet { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: flex-end; justify-content: center; }
.gwm-sheet-back { position: absolute; inset: 0; background: rgba(13, 40, 24, .55); }
.gwm-sheet-card { position: relative; width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 18px 18px 0 0; padding: 14px 14px 8px; box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
.gwm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.gwm-sheet-title { color: var(--primary); font-size: 16px; }
.gwm-sheet-x { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 6px; }
.gwm-sheet-search { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.gwm-sheet-list { overflow-y: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.gwm-sheet-opt { display: block; width: 100%; text-align: left; padding: 13px 12px; border: 0; border-bottom: 1px solid var(--border);
    background: none; font: inherit; color: var(--text); cursor: pointer; }
.gwm-sheet-opt:last-child { border-bottom: 0; }
.gwm-sheet-opt.is-on { background: var(--cream); color: var(--primary); font-weight: 700; }
.gwm-sheet-opt.is-any { color: var(--muted); }
.gwm-sheet-none { padding: 18px 12px; color: var(--muted); margin: 0; }
html.gwm-sheet-open, html.gwm-sheet-open body { overflow: hidden; }

/* In the admin panel the boxes are Bootstrap's, so the button takes their height instead. */
.gwm-pick select.form-select + .gwm-pick-btn, .gwm-pick select.form-control + .gwm-pick-btn {
    height: 38px; padding: 6px 12px; font-size: 1rem; border-width: 1px; border-radius: 0.375rem; background: #fff; }
.gwm-pick select.form-select-sm + .gwm-pick-btn, .gwm-pick select.form-control-sm + .gwm-pick-btn {
    height: 31px; padding: 2px 10px; font-size: 0.875rem; border-radius: 0.25rem; }