/* AVIDE Events: registration form, listing, and calendar views.
   Kept theme-agnostic; the avide-navy palette (navy #1b2a4a, gold accents)
   is referenced only loosely so the theme can override with its own rules. */

/* Registration form */
.avide-event-register { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 1px solid #d9dee8; border-radius: 8px; background: #f7f9fc; }
.avide-event-register h2 { margin-top: 0; }
/* Key facts: one horizontal chip row (label on top, bold value below). */
.avide-event-facts { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; list-style: none; padding: 0; margin: 0 0 1.1rem; }
/* The theme spaces list items with a top margin on every li after the first; inside this flex row that made the first chip taller than the rest. */
.avide-event-facts > li, .prose .avide-event-facts > li + li { margin: 0; }
.avide-event-facts li { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 7.5rem; padding: 0.55rem 0.95rem; background: #fff; border: 1px solid #dfe5ef; border-radius: 8px; border-top: 3px solid var(--brand-highlight, #c9a227); }
.avide-event-facts__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; }
.avide-event-facts__value { font-weight: 700; color: var(--navy-900, #1b2a4a); }
.avide-event-facts li.avide-event-facts__ics { justify-content: center; border-top-color: #dfe5ef; }
.avide-event-facts__ics a { font-weight: 600; text-decoration: none; }
.avide-event-form p { margin: 0.6rem 0; }
/* The registration form as a distinct panel under the fact chips, left-
   aligned rather than centred (founder, 2026-09-10: fields were hugging the
   left of the full-width 1240px column with WhatsApp orphaned to the
   right). Same border/radius/background language as the fact chips. */
.avide-event-panel { max-width: 44rem; padding: 1.25rem 1.5rem; border: 1px solid #dde3ee; border-radius: 6px; background: #fff; }
/* p.avide-event-required-note, not just the class: ".avide-event-form p"
   above already sets margin on every <p> with one type selector's worth of
   specificity, which a plain class selector here does not beat. */
p.avide-event-required-note { font-size: 0.85em; color: #6b7280; margin: 0 0 0.9rem; }
/* Four fieldsets group the form the way a reader thinks about it: contact
   details, the event's own questions (only if it has any), the fee, then
   the confirmation and submit. The border is removed because the panel
   itself already reads as one bounded form. */
.avide-event-fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; }
.avide-event-fieldset:last-child { margin-bottom: 0; }
.avide-event-fieldset legend { padding: 0; margin-bottom: 0.6rem; font-size: 0.95em; font-weight: 700; color: #1b2a4a; }
/* One column under 40em (never squeeze two fields into a phone screen),
   two from there; the short pairs (email/re-enter, phone/WhatsApp,
   Zalo/the event's first select question) fall into place two per row
   automatically, while name, textareas, checkboxes and the fee slider each
   claim the full row. */
.avide-event-fields { display: grid; grid-template-columns: 1fr; gap: 0.8rem 1.25rem; }
@media (min-width: 40em) { .avide-event-fields { grid-template-columns: 1fr 1fr; } }
.avide-event-form .avide-event-fields > p { margin: 0; }
.avide-event-fields__full { grid-column: 1 / -1; }
.avide-event-fields label { display: block; font-size: 0.9em; font-weight: 600; color: #1b2a4a; margin-bottom: 0.25rem; }
/* Every short field fills its grid column; the old 28rem cap was sized for
   a form that was never this wide. Select gets the same box as an input
   (founder: "drop-down boxes should have the same height as input boxes"),
   its native arrow replaced with a flat chevron so the flush height reads
   intentional rather than like two different controls glued together. */
.avide-event-fields input[type="text"],
.avide-event-fields input[type="email"],
.avide-event-fields input[type="tel"],
.avide-event-fields select,
.avide-event-fields textarea { width: 100%; min-height: 2.6rem; padding: 0.45rem 0.6rem; border: 1px solid #b9c2d4; border-radius: 4px; font: inherit; box-sizing: border-box; }
.avide-event-fields select { appearance: none; background-color: #fff; background-repeat: no-repeat; background-position: right 0.6rem center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5568' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); padding-right: 1.8rem; }
.avide-event-fields textarea { min-height: 5.5rem; }
p.avide-event-submit { margin: 0.4rem 0 0; text-align: right; }
.avide-event-form button { padding: 0.55rem 1.4rem; border: 0; border-radius: 4px; background: #1b2a4a; color: #fff; cursor: pointer; }
.avide-event-form button:hover { background: #27407a; }
.avide-event-nudge { padding: 0.55rem 0.9rem; border-radius: 4px; background: #f4f6fa; border: 1px solid #dde3ee; line-height: 1.6; font-size: 0.95em; color: #33415e; }
.avide-event-nudge-join, .avide-event-nudge-login { font-weight: 600; }
.avide-event-notice { padding: 0.6rem 0.9rem; border-radius: 4px; }
.avide-event-notice.notice-ok { background: #e6f4e6; border: 1px solid #9ec89e; }
.avide-event-notice.notice-err { background: #fbeaea; border: 1px solid #d6a0a0; }

/* Listing view */
.avide-ev-listing .avide-ev-heading { margin: 1.25rem 0 0.5rem; }
.avide-ev-list { list-style: none; padding: 0; margin: 0; }
.avide-ev-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid #e4e8f0; }
.avide-ev-thumb { flex-shrink: 0; }
.avide-ev-thumb img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.avide-ev-item-body { flex: 1 1 auto; min-width: 0; }
.avide-ev-date { font-variant-numeric: tabular-nums; color: #444; margin-right: 0.4rem; }
.avide-ev-mode { font-size: 0.8em; padding: 0.1rem 0.5rem; border-radius: 999px; background: #e8edf6; color: #1b2a4a; vertical-align: middle; }

/* Calendar view */
.avide-ev-calendar { margin: 1rem 0; }
/* Several controls below (the week nav bar, the mobile view toggle's own
   "Xem theo tuần" button) are shown/hidden by setting the `hidden`
   property in JS; a later rule that gives the same element an unconditional
   `display` value (flex/block for layout) outranks the UA [hidden] rule and
   the element stays visible regardless of what JS set. This blanket rule
   guarantees `hidden` always wins inside the calendar widget. */
.avide-ev-calendar [hidden] { display: none !important; }
.avide-ev-cal-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.avide-ev-cal-nav a { text-decoration: none; font-size: 1.2em; padding: 0 0.4rem; }
.avide-ev-cal-title { font-weight: 600; }
.avide-ev-cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.avide-ev-cal-grid th { padding: 0.3rem; text-align: center; background: #1b2a4a; color: #fff; font-weight: 500; }
.avide-ev-cal-grid td { vertical-align: top; border: 1px solid #e4e8f0; height: 5.5rem; padding: 0.2rem; }
.avide-ev-cal-pad { background: #f4f6fa; }
/* Solar day number and lunar date sit on one line (founder, 2026-09-10:
   "21 (15 ÂL)"), the number first and heavier, the lunar date right after
   it and visually secondary. Flex blockifies both children regardless of
   their own display value, so the anchor and the lunar span line up on
   one baseline without extra markup. */
.avide-ev-cal-dayline { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.3em; }
/* Defense in depth: month view must render the number/lunar pair inline
   whether the pair sits in the pristine .avide-ev-cal-dayline (rendered by
   PHP) or, if a row was ever shown in week mode first, inside the
   .avide-ev-cal-daystrip that decorate() built for it (calendar-layers.js
   now undecorates on the way back to month view, but this covers any gap).
   The weekday label is a week-mode-only concept. */
.avide-ev-calendar:not(.is-week) .avide-ev-cal-dow { display: none; }
.avide-ev-calendar:not(.is-week) .avide-ev-cal-daystrip { display: flex; align-items: baseline; justify-content: flex-end; gap: 0.3em; }
.avide-ev-cal-num { display: block; font-size: 1em; font-weight: 700; color: #1b2a4a; text-align: right; text-decoration: none; padding: 0.05rem 0.25rem; border-radius: 3px; }
a.avide-ev-cal-num:hover { background: #e8edf6; color: #1b2a4a; }
.avide-ev-cal-today { outline: 2px solid #c9a227; outline-offset: -2px; }
.avide-ev-cal-selected { background: #f2f5fa; box-shadow: inset 0 0 0 2px #1b2a4a; }
.avide-ev-cal-selected .avide-ev-cal-num { background: #1b2a4a; color: #fff; }
.avide-ev-cal-daypanel { margin: 1rem 0; padding: 0.9rem 1.1rem; border: 1px solid #dfe5ef; border-radius: 8px; background: #f7f9fc; }
.avide-ev-cal-daypanel h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.avide-ev-cal-empty { margin: 0.75rem 0; color: #4a5568; }

/* Optional-support slider (Ubuntu-style pay-what-you-want) */
.avide-ev-support { margin: 1rem 0; padding: 0.9rem 1.1rem; border: 1px solid #dfe5ef; border-radius: 8px; background: #f7f9fc; }
.avide-ev-support__row { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.5rem; }
.avide-ev-support__row input[type="range"] { flex: 1 1 auto; accent-color: #c9a227; }
.avide-ev-support__value { white-space: nowrap; font-weight: 600; }
.avide-ev-support__value input[type="number"] { width: 7em; padding: 0.3rem 0.4rem; border: 1px solid #b9c2d4; border-radius: 4px; }
.avide-ev-support__note { margin: 0.4rem 0 0; font-size: 0.88em; color: #4a5568; }
.avide-ev-cal-event { display: block; margin-top: 0.15rem; padding: 0.15rem 0.3rem; border-radius: 3px; background: #e8edf6; font-size: 0.78em; line-height: 1.25; text-decoration: none; color: #1b2a4a; overflow-wrap: break-word; }
.avide-ev-cal-event:hover { background: #d4deef; }
.avide-ev-cal-time { font-weight: 600; }
.avide-ev-cal-thumb { display: block; width: 100%; height: 44px; object-fit: cover; border-radius: 3px; margin-bottom: 0.15rem; }

/* Week mode on narrow screens (calendar-layers.js): one grid row at a time */
.avide-ev-cal-grid tr.avide-ev-cal-row-hidden { display: none; }
/* The prev/next week bar only makes sense in week mode: display is gated
   on .is-week (not just left to the [hidden] guard above) so a stray
   remembered "week" preference or a resize can never leave it showing over
   the month grid. */
.avide-ev-cal-weekbar { align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.4rem 0 0.5rem; }
.avide-ev-calendar.is-week .avide-ev-cal-weekbar { display: flex; }
.avide-ev-calendar:not(.is-week) .avide-ev-cal-weekbar { display: none; }
.avide-ev-cal-weekbar button { border: 1px solid #cbd5e1; background: #fff; color: #1b2a4a; border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.85em; min-height: 40px; cursor: pointer; }
.avide-ev-cal-weekbar__label { font-weight: 600; font-size: 0.9em; text-align: center; flex: 1; }
/* Holds "Hôm nay" and, on narrow screens only, the "Xem theo tuần/tháng"
   toggle; the wrapper itself is always visible (Today works in both month
   and week view) and the two buttons wrap onto their own line rather than
   overlap if a translation runs long on a 375px screen. */
.avide-ev-cal-weekbar__toggle { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85em; }
.avide-ev-cal-weekbar__toggle button { border: 0; background: none; color: #1b2a4a; text-decoration: underline; font: inherit; font-size: inherit; cursor: pointer; padding: 0.3rem 0; min-height: 40px; }
/* A brief highlight when "Hôm nay" lands on a cell already in view. */
@keyframes avide-ev-cal-pulse { 0% { background-color: rgba(201, 162, 39, 0.4); } 100% { background-color: transparent; } }
.avide-ev-cal-today-pulse { animation: avide-ev-cal-pulse 1s ease-out; }
.avide-ev-calendar.is-week .avide-ev-cal-grid td { height: auto; min-height: 4.2rem; }
.avide-ev-calendar.is-week .avide-ev-cal-holiday { font-size: 0.7em; }
/* Week mode stacks the seven days vertically: one card per day with the
   weekday, the date, the lunar date and the day's events in full. */
.avide-ev-calendar.is-week .avide-ev-cal-grid thead { display: none; }
.avide-ev-calendar.is-week .avide-ev-cal-grid, .avide-ev-calendar.is-week .avide-ev-cal-grid tbody { display: block; }
.avide-ev-calendar.is-week .avide-ev-cal-grid tbody tr:not(.avide-ev-cal-row-hidden) { display: block; }
.avide-ev-calendar.is-week .avide-ev-cal-grid td { display: block; width: auto; height: auto; min-height: 0; padding: 0.55rem 0.7rem; border: 1px solid #e4e8f0; border-top: 0; }
.avide-ev-calendar.is-week .avide-ev-cal-grid tbody tr:not(.avide-ev-cal-row-hidden) td:first-child { border-top: 1px solid #e4e8f0; }
.avide-ev-calendar.is-week .avide-ev-cal-grid td.avide-ev-cal-pad { display: none; }
.avide-ev-calendar.is-week .avide-ev-cal-daystrip { display: flex; align-items: baseline; gap: 0.5rem; }
.avide-ev-calendar.is-week .avide-ev-cal-dow { font-weight: 600; color: #1b2a4a; min-width: 2.2em; }
.avide-ev-calendar.is-week .avide-ev-cal-num { display: inline; text-align: left; padding: 0; font-size: 1.05em; font-weight: 700; color: #1b2a4a; }
.avide-ev-calendar.is-week .avide-ev-cal-lunar { display: inline; text-align: left; padding: 0; font-size: 0.8em; }
.avide-ev-calendar.is-week .avide-ev-cal-holiday { display: inline-block; margin: 0.2rem 0.3rem 0 0; font-size: 0.78em; }
.avide-ev-calendar.is-week .avide-ev-cal-event { margin-top: 0.35rem; padding: 0.4rem 0.6rem; font-size: 0.9em; }
.avide-ev-calendar.is-week .avide-ev-cal-thumb { display: none; }
.avide-ev-calendar.is-week .avide-ev-cal-today { outline: none; border-left: 3px solid #c9a227; }
.avide-ev-cal-weeklist__empty { margin: 0.6rem 0 0; color: #4a5568; font-size: 0.9em; }

/* Event pages run the site's full content width. The theme caps every
   .entry-content.prose column at --container-md (840px) for reading, while
   the site's own pages (Hội viên, Dịch vụ, Tương trợ, Sổ tay) fill the
   1240px container; an announcement with a hero image, fact chips and a
   form read as squeezed at 840px (founder, 2026-09-10). The override sits
   here rather than in theme.css so it ships with the plugin that owns
   the event page. */
.single-avide_activity .entry-content.prose, .avide-events-page .entry-content.prose { max-width: none; }
.single-avide_activity .page-header__desc, .avide-events-page .page-header__desc { max-width: none; }
/* The featured image follows: WordPress ships a srcset up to the original, so width:100% picks the sharp candidate. */
.single-avide_activity .entry-thumb { max-width: none; }
.single-avide_activity .entry-thumb img { width: 100%; height: auto; }

/* Reference layers: Danish (red) and Vietnamese (gold) notable days, drawn by calendar-layers.js */
.avide-ev-cal-layers { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.2rem 0 0.6rem; font-size: 0.9em; color: #1b2a4a; }
.avide-ev-cal-layers label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.avide-ev-cal-layers input { accent-color: #1b2a4a; }
.avide-ev-cal-lunar-legend { font-size: 0.85em; color: #55617a; margin: 0.2rem 0 0.4rem; }
/* The legend and the Today/toggle buttons used to stack as two short
   lines; one flex row keeps them level on desktop (legend left, buttons
   right) and still reads right with the legend hidden (vn layer off) or
   wrapped onto its own line on a narrow screen. */
.avide-ev-cal-toolbar-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin: 0.3rem 0 0.6rem; }
.avide-ev-cal-toolbar-row .avide-ev-cal-lunar-legend { margin: 0; flex: 1 1 auto; min-width: 0; }
.avide-ev-cal-toolbar-row .avide-ev-cal-weekbar__toggle { margin: 0; flex: 0 0 auto; margin-left: auto; }
.avide-ev-cal-holiday { display: block; margin-top: 0.15rem; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.7em; line-height: 1.2; overflow-wrap: break-word; }
.avide-ev-cal-holiday--dk { background: #fbe9e7; color: #8a1c12; }
.avide-ev-cal-holiday--vn { background: #fff4d6; color: #6f4a00; }
.avide-ev-cal-holiday--off { font-weight: 600; }
.avide-ev-cal-off .avide-ev-cal-num { color: #c62828; font-weight: 700; }
.avide-ev-cal-lunar { display: block; text-align: right; font-size: 0.8em; font-weight: 500; line-height: 1.1; color: #4a5568; padding-right: 0.25rem; white-space: nowrap; }
/* Mồng 1 (lunar new moon) and rằm (full moon, lunar 15) get a red label so
   they stand out at a glance; the solar day number keeps its own navy (or
   day-off red) so the two are never confused with each other. Same red in
   month view and week mode; the compound selector outranks the base rule's
   color regardless of which one is declared later in the file. */
.avide-ev-cal-lunar.avide-ev-cal-lunar--moon { color: #c62828; font-weight: 600; }
/* ISO week-number gutter (calendar-layers.js), toggled on/off per browser;
   inserted/removed by JS so this stylesheet only needs to size and colour
   it. Narrow and muted so it reads as a gutter, not an eighth day column;
   no explicit width on the day th/td means the fixed table layout shares
   the remaining space equally between them. */
/* Sized for the header WORD ("Tuần"/"Uge"/"Wk"), not just the two-digit
   number under it — a width picked by eye or guessed in em twice left the
   word either overflowing into the T2 column or clipped mid-letter. JS
   (calendar-layers.js, renderWeekCol) measures the word's actual rendered
   width and sets --avide-week-w from that; the fallback here only matters
   before that JS runs or if it does not (no-JS: the whole toolbar and
   gutter stay hidden anyway). overflow/text-overflow stay as a guard, not
   the primary fix. */
.avide-ev-cal-week-th, .avide-ev-cal-week { width: var(--avide-week-w, 3.8em); white-space: nowrap; }
.avide-ev-cal-week-th { font-size: 0.75em; color: #8a94a6; text-align: center; overflow: hidden; text-overflow: clip; }
.avide-ev-cal-week { text-align: center; vertical-align: top; font-size: 0.8em; font-weight: 600; color: #55617a; background: #f5f7fa; padding: 0.2rem 0.3em; }
/* "Tuần"/"Uge" fit the desktop gutter (2.8em) but wrap letter-by-letter at
   the ~2em mobile one; the short "#" form (title carries the full word)
   swaps in there instead of shrinking type past legibility. */
.avide-ev-cal-week-th-short { display: none; }
/* Too narrow once the grid is a stack of cards; the row's week number
   shows in the week bar's own title instead (calendar-layers.js). The
   generic ".is-week .avide-ev-cal-grid td" rule (below) also sets display,
   with one more type selector than a plain class-only override, so this
   needs the same "td"/"th" qualifier to actually win instead of being
   silently outranked and left visible as a stray block. */
.avide-ev-calendar.is-week .avide-ev-cal-grid th.avide-ev-cal-week-th,
.avide-ev-calendar.is-week .avide-ev-cal-grid td.avide-ev-cal-week { display: none; }

@media (max-width: 640px) {
    .avide-ev-cal-grid td { height: auto; min-height: 2.2rem; padding: 0.1rem; }
    .avide-ev-cal-grid th { font-size: 0.75em; white-space: nowrap; }
    .avide-ev-cal-thumb { display: none; }
    /* Give the seven date columns as much of a 375px screen as possible. */
    .avide-ev-cal-week-th, .avide-ev-cal-week { width: 2em; }
    .avide-ev-cal-week { font-size: 0.7em; }
    .avide-ev-cal-week-th-full { display: none; }
    .avide-ev-cal-week-th-short { display: inline; font-size: 1.1em; }

    /* Month grid only ("Xem cả tháng" on a phone). Week mode (the stacked
       cards) is excluded throughout this block: it already has the full
       width of the screen for one day at a time, so chips, events and the
       parenthesised lunar date all fit there as text. At ~40px per day
       cell here, anything longer than a glyph must be reduced to one, with
       the detail moved to `title` — a plain font-size cut was not enough
       and produced exactly the founder's screenshot: "Quốc khánh" wrapping
       letter by letter, "10" splitting into "1"/"0", "CN" wrapping. */
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-num { white-space: nowrap; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-dayline { display: block; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-lunar { display: block; text-align: right; white-space: nowrap; font-size: 0.62em; padding-right: 0.15rem; }
    /* calendar-layers.js splits the lunar label into a bare-number span
       and a "(...)"/"ÂL" span; only the number fits here, full date and
       any mồng-1/rằm note stay in the title attribute. */
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-lunar__x { display: none; }

    /* Holiday chips collapse to a coloured bar; calendar-layers.js sets
       `title` on every chip (not only the ones that already needed one
       for a VI/EN name mismatch), so the name is still one tap away. A
       closed public holiday (day off) is solid; an ordinary notable day
       is a lighter tint of the same colour. */
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-holiday { display: block; height: 5px; margin-top: 0.15rem; padding: 0; border-radius: 2px; font-size: 0; line-height: 0; overflow: hidden; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-holiday--dk { background: #f3c6c0; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-holiday--vn { background: #ffe6a3; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-holiday--off { background: #c62828; }

    /* Events collapse to one navy dot each, three at most (a busy day is
       rare, and a phone reader picks the day and reads it in full via the
       day panel or week mode rather than the month cell). The time and
       title move to `title` on the link itself (calendar.php). */
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-event { display: inline-block; width: 6px; height: 6px; margin: 1px 1px 0 0; padding: 0; border-radius: 50%; background: #1b2a4a; font-size: 0; line-height: 0; vertical-align: middle; }
    .avide-ev-calendar:not(.is-week) .avide-ev-cal-event:hover { background: #27407a; }
    .avide-ev-calendar:not(.is-week) td .avide-ev-cal-event:nth-of-type(n+4) { display: none; }
}


/* Phone: 44px touch targets (WCAG 2.5.8); the 16px font also stops iOS
   zooming in when a field takes focus. */
@media (max-width: 480px) {
  .avide-event-form input[type="text"],
  .avide-event-form input[type="email"],
  .avide-event-form input[type="tel"],
  .avide-event-form select,
  .avide-event-form textarea { font-size: 1rem; min-height: 44px; }
  .avide-event-form textarea { min-height: 5rem; }
  .avide-event-form button { width: 100%; min-height: 44px; }
}