/* ===========================================================================
   Popups: the one template every popup on the site uses.

   Drawn after the SMS Reminder window: a green title bar with a white x, a
   white rounded window on a dark green backdrop, bold labels over roomy
   fields, and the buttons at the bottom right with the main one in green.

       <dialog class="ez-popup" id="...">
         <div class="ez-popup-head">
           <span>Title</span>
           <button type="button" class="ez-popup-x" data-close="..." title="Close">&times;</button>
         </div>
         <div class="ez-popup-body">
           <span class="ez-popup-eyebrow">Optional</span>
           <h2 class="ez-popup-title">Optional</h2>
           <label>Field <input type="text"></label>
           <p class="ez-popup-help">Optional</p>
           <div class="ez-popup-actions">
             <button type="button" data-close="...">Cancel</button>
             <button type="submit" class="ez-popup-primary">Save</button>
           </div>
         </div>
       </dialog>

   Open it with dialog.showModal(). Sizes: add is-wide (850px) or is-frame
   (a tall window around an iframe, like SMS Reminder itself).

   After any change to this file, bump ?v= on every page that links it:
       grep -rl "popup.css?v=" DL
   Cloudflare keeps a copy of each address for hours, so an edit made under the
   same number does not reach anyone.

   Change a popup's look here, nowhere else. What goes inside a particular
   popup (a list of templates, say) stays with that page. Plain ASCII: the
   admin pages are sent as ISO-8859-1.
   =========================================================================== */

.ez-popup, .ez-popup *, .ez-popup *::before, .ez-popup *::after { box-sizing: border-box; }

dialog.ez-popup {
    width: min(520px, calc(100% - 24px));
    max-width: none;
    max-height: calc(100vh - 32px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background-color: #fff;
    color: #16261a;
    box-shadow: 0 24px 70px rgba(10, 30, 14, .38);
    font: 14px/1.45 Arial, Helvetica, sans-serif;
    text-align: left;
}
dialog.ez-popup[open] { display: flex; flex-direction: column; }
/* The box itself takes focus when it opens; that needs no ring around it. */
dialog.ez-popup:focus, .ez-popup-body:focus { outline: none; }
dialog.ez-popup::backdrop { background-color: rgba(14, 38, 18, .5); }
dialog.ez-popup.is-wide { width: min(850px, calc(100% - 24px)); }
dialog.ez-popup.is-frame { width: min(780px, calc(100% - 24px)); height: min(88vh, 940px); }

/* The green title bar. */
.ez-popup-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 8px 12px 18px;
    background-color: #008000;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
}
.ez-popup .ez-popup-x {
    flex: none;
    width: 38px;
    height: 38px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #fff;
    font: normal 24px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.ez-popup .ez-popup-x:hover { background-color: rgba(255, 255, 255, .18); }
.ez-popup .ez-popup-x:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* A popup that does something that cannot be undone (a refund, say) shows it:
   a red title bar, and a red main button. */
.ez-popup.is-danger .ez-popup-head { background-color: #9b2f2f; }
.ez-popup .ez-popup-danger { border-color: #9b2f2f; background-color: #9b2f2f; color: #fff; }
.ez-popup .ez-popup-danger:hover { border-color: #7f2424; background-color: #7f2424; color: #fff; }

/* The content, which scrolls on its own when it is taller than the screen. */
.ez-popup-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px 22px; }
.ez-popup-frame { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; }
.ez-popup-eyebrow {
    display: block;
    margin: 0 0 2px;
    color: #0b7a0b;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ez-popup-title,
.ez-popup-body h2 { margin: 0 0 14px; color: #16261a; font-size: 20px; line-height: 1.25; text-align: left; }
.ez-popup-body p { margin: 0 0 12px; }
.ez-popup-help { margin: 8px 0 0; color: #63705f; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.ez-popup-body p.ez-popup-help { margin: 8px 0 0; }
.ez-popup-note { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background-color: #f2f9f2; color: #33443a; }
.ez-popup-error { margin: 0 0 14px; padding: 10px 12px; border-radius: 9px; background-color: #fdf0f0; color: #a12a2a; font-weight: bold; }

/* Fields. :where() keeps these rules weak, so a page can still adjust a field
   inside its own popup without a fight. */
.ez-popup label { display: block; min-width: 0; margin: 0 0 14px; font-weight: bold; }
.ez-popup input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden])),
.ez-popup select,
.ez-popup textarea {
    display: block;
    width: 100%;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 11px 13px;
    border: 1px solid #cfdfd0;
    border-radius: 9px;
    background-color: #fff;
    color: #16261a;
    font: normal 14px/1.3 Arial, Helvetica, sans-serif;
}
.ez-popup textarea { resize: vertical; }
/* A field written inside its label sits just under the words. */
.ez-popup label > input:where(:not([type=checkbox]):not([type=radio])),
.ez-popup label > select,
.ez-popup label > textarea { margin-top: 6px; }
.ez-popup input:where(:not([type=checkbox]):not([type=radio])):focus,
.ez-popup select:focus,
.ez-popup textarea:focus { border-color: #0b7a0b; outline: 2px solid #cfe8cf; outline-offset: 0; }
.ez-popup select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20fill%3D%27%230b7a0b%27%20d%3D%27M1.4%200%206%204.6%2010.6%200%2012%201.4%206%207.4%200%201.4z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.ez-popup select::-ms-expand { display: none; }

/* Tick boxes and round buttons sit beside their words, not under them. */
.ez-popup input[type=checkbox],
.ez-popup input[type=radio] {
    flex: none;
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: #0b7a0b;
    vertical-align: -3px;
    cursor: pointer;
}
.ez-popup input[type=checkbox]:focus-visible,
.ez-popup input[type=radio]:focus-visible { outline: 2px solid #cfe8cf; outline-offset: 2px; }
.ez-popup label.ez-popup-check { display: flex; align-items: flex-start; gap: 9px; font-weight: normal; cursor: pointer; }
.ez-popup label.ez-popup-check input { margin-top: 1px; }

/* Layout helpers for longer forms. */
.ez-popup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.ez-popup-grid > .ez-popup-full { grid-column: 1 / -1; }
.ez-popup-section { margin: 22px 0 6px; text-align: left; color: #0b7a0b; font-size: 12px; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; }
.ez-popup-req { color: #d0312d; font-weight: bold; }
.ez-popup-rows { margin: 0 0 16px; overflow: hidden; border: 1px solid #dce6df; border-radius: 9px; }
.ez-popup-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid #e6ece8; }
.ez-popup-rows > div:last-child { border-bottom: 0; }
.ez-popup-rows > div[hidden] { display: none; }
.ez-popup-rows span { color: #68766c; }
.ez-popup-rows strong { text-align: right; }
@media (max-width: 560px) { .ez-popup-grid { grid-template-columns: minmax(0, 1fr); } }

/* Buttons: plain ones are outlined, the main one is green. */
.ez-popup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.ez-popup button:where(:not(.ez-popup-x)),
.ez-popup a.ez-popup-button {
    display: inline-block;
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 11px 20px;
    border: 1px solid #bcd5be;
    border-radius: 9px;
    background-color: #fff;
    color: #1d4620;
    font: bold 14px/1.2 Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}
.ez-popup button:where(:not(.ez-popup-x)):hover,
.ez-popup a.ez-popup-button:hover { background-color: #eaf5ea; text-decoration: none; }
.ez-popup .ez-popup-primary,
.ez-popup a.ez-popup-button.ez-popup-primary { border-color: #0b7a0b; background-color: #0b7a0b; color: #fff; }
.ez-popup .ez-popup-primary:hover,
.ez-popup a.ez-popup-button.ez-popup-primary:hover { border-color: #0a660a; background-color: #0a660a; color: #fff; }
.ez-popup button:disabled { opacity: .55; cursor: wait; }
/* A link standing in for a button, held back until a box is ticked. */
.ez-popup a.ez-popup-button[aria-disabled=true],
.ez-popup a.ez-popup-button[aria-disabled=true]:hover { border-color: #cfdcd5; background-color: #cfdcd5; color: #fff; cursor: not-allowed; }
.ez-popup button:where(:not(.ez-popup-x)):focus-visible,
.ez-popup a.ez-popup-button:focus-visible { outline: 2px solid #cfe8cf; outline-offset: 2px; }

/* Opening. */
@keyframes ez-popup-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ez-popup-fade { from { opacity: 0; } to { opacity: 1; } }
dialog.ez-popup[open] { animation: ez-popup-in .19s ease-out both; }
dialog.ez-popup[open]::backdrop { animation: ez-popup-fade .19s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    dialog.ez-popup[open], dialog.ez-popup[open]::backdrop { animation: none; }
}

@media (max-width: 700px) {
    dialog.ez-popup { max-height: calc(100vh - 24px); }
    dialog.ez-popup.is-frame { height: calc(100vh - 24px); }
    .ez-popup-head { padding: 10px 6px 10px 14px; font-size: 14px; }
    .ez-popup-body { padding: 16px; }
    .ez-popup-actions { flex-direction: column-reverse; align-items: stretch; }
    .ez-popup-actions button, .ez-popup-actions a.ez-popup-button { width: 100%; }
}

/* While a popup is open the page behind it stays still: it does not scroll,
   and scrolling inside the popup does not carry on to the page once the
   popup's own content reaches its end. */
html:has(dialog.ez-popup[open]) { overflow: hidden; }
.ez-popup-body { overscroll-behavior: contain; }