/*
 * Driving Tests Frame - chrome fix (Batch 10 fix, plugin 1.9.2).
 *
 * The approved prototype renders every mobile-menu item and every
 * country-picker row as a <button>, and the shared fragment
 * stylesheet styles only those button forms (.mobile-menu button,
 * plus the typography a button gets from the UA stylesheet). The
 * WordPress fragments render five menu items (country, practice,
 * results, blog, account), the picker rows and the picker clear row
 * as <a> anchors with real hrefs, so they missed the button styling
 * entirely: menu rows rendered as plain stacked text and picker rows
 * rendered 13px too tall. These rules close exactly that gap and
 * nothing else: the menu rules mirror .mobile-menu button verbatim
 * for anchors, and the picker rules give the anchors the button UA
 * typography (13.3333px, line-height normal) that the prototype's
 * rows are laid out with. Enqueued only on frame pages, versioned
 * with DT_FRAME_VERSION.
 */

.mobile-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:10px 16px;background:#fff;border:0;border-bottom:1px solid #EDF1F5;font-weight:700;font-size:16px;color:#007AFF;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;line-height:1.25;text-align:left;text-decoration:none;cursor:default}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu a.on{background:#E8F2FF}
.mobile-menu a:active{background:#E8F2FF}
.mobile-menu a[hidden]{display:none!important}

a.p-row{font-size:13.3333px;line-height:normal}
a.p-clear{font-size:13.3333px;line-height:normal}

/*
 * Batch 10 fix 2 (plugin 1.9.3): iOS Safari picker zoom guard.
 *
 * chrome.js focuses the picker search input when the picker opens
 * (prototype parity), and the shared fragment stylesheet sets that
 * input at 14px. iOS Safari auto-zooms the whole page whenever a
 * focused input's font-size is under 16px (the zoom factor is the
 * 16/14 ratio, about 1.14), anchored on the input; on the owner's
 * iPhone that pushed the picker panel and the header off the left
 * edge while desktop-class browsers (and Playwright's WebKit, which
 * has no such heuristic) laid the page out correctly. At 16px no
 * zoom triggers. The ID selector is required: this stylesheet is
 * linked in <head>, before the fragments' own <style> in <body>, so
 * only ID specificity beats the fragment's .picker-search input rule
 * regardless of order.
 */
#pickerSearch{font-size:16px}

/*
 * Plugin 1.10.2 (owner defect B): the toast is a notice card, not a
 * pill. The shared fragment stylesheet gives .toast a 999px
 * border-radius (a pill). A short message looks fine, but a long
 * one (the bank-in-preparation notice is five lines at phone
 * width) grows the box until the 999px radius turns it into an
 * oval: on the owner's iPhone the notice rendered as a large dark
 * circle with the centred text spilling past its curved edges.
 * The geometry is pinned here: a rounded rectangle (16px radius,
 * never a pill), width fit to the message up to 92vw, height auto,
 * text wrapping inside the box. The body prefix gives the
 * specificity needed to beat the fragments' own <style>, which is
 * printed in the body, after this head stylesheet. Colours and
 * the show/hide transition stay the fragment's; the horizontal
 * centring moves from left:50% + translateX to auto margins,
 * because a fit-content box starting at 50% can only use the
 * right half of the screen (the shrink-to-fit available width),
 * which is what squeezed long notices into a narrow column.
 */
body .toast{left:0;right:0;margin-left:auto;margin-right:auto;width:fit-content;max-width:92vw;height:auto;max-height:78vh;overflow-y:auto;border-radius:16px;padding:14px 20px;line-height:1.5;white-space:normal;transform:translateY(20px)}
body .toast.show{transform:translateY(0)}

/*
 * Plugin 1.10.2 (owner defect C): the account pages match the
 * approved prototype. Three gaps, all closed here and nowhere
 * else:
 *
 * 1. The fragments carry the prototype's account stylesheet, but
 *    it styles .acct-tabs button and .acct-switch button, while
 *    the WordPress pages render both controls as anchors with
 *    real hrefs. The anchors get the buttons' treatment.
 * 2. The Ultimate Member form inside the card keeps UM's own
 *    stylesheet (allowed on frame pages; printed late, with
 *    !important field rules at lower specificity). The rules
 *    below restyle that form to the prototype's .acct-field
 *    design: labels, inputs (16px, so iOS Safari does not
 *    auto-zoom on focus), the full-width navy-shadowed primary
 *    button, the forgot-password link and readable errors.
 *    Everything is scoped to .acct-card, so UM's own utility
 *    pages (profile, account, password reset) keep UM's theme
 *    rendering, and no social-login control is added anywhere:
 *    the forms stay email and password only, as the owner
 *    directed.
 * 3. UM pins each form to a 450px max-width through an inline
 *    <style> per form; the card is the measure on these pages.
 */

.acct-tabs a{display:flex;align-items:center;justify-content:center;flex:1;border-radius:999px;padding:10px 8px;font-weight:700;font-size:14.5px;line-height:1.3;color:var(--muted);text-decoration:none}
.acct-tabs a.on{background:var(--navy);color:#fff}
.acct-switch a{color:var(--blue);font-weight:700;text-decoration:none}

.acct-card .um.um-login,.acct-card .um.um-register{max-width:none;width:100%;margin:0}
.acct-card .um-form .um-row{margin:0!important}
.acct-card .um-form .um-field{padding:0;margin:0 0 12px}
.acct-card .um-field-label label{display:block;font-weight:700;font-size:13.5px!important;line-height:1.35!important;margin:0 0 6px;color:var(--ink)}
.acct-card .um-form input[type="text"],.acct-card .um-form input[type="email"],.acct-card .um-form input[type="password"],.acct-card .um-form input[type="tel"],.acct-card .um-form input[type="search"],.acct-card .um-form input[type="url"],.acct-card .um-form textarea,.acct-card .um-form select{width:100%!important;display:block!important;height:auto!important;margin:0!important;padding:12px 14px!important;font-size:16px!important;line-height:1.4;border:1.5px solid var(--line)!important;border-radius:12px!important;background:var(--paper)!important;color:var(--ink);box-shadow:none!important;box-sizing:border-box!important;outline:0!important;cursor:text!important}
.acct-card .um-form input[type="text"]:focus,.acct-card .um-form input[type="email"]:focus,.acct-card .um-form input[type="password"]:focus,.acct-card .um-form input[type="tel"]:focus,.acct-card .um-form input[type="search"]:focus,.acct-card .um-form input[type="url"]:focus,.acct-card .um-form textarea:focus,.acct-card .um-form select:focus{border-color:var(--blue)!important;background:#fff!important}
.acct-card .um-col-alt{margin:16px 0 0}
.acct-card .um-col-alt .um-button{display:block!important;width:100%!important;min-width:0!important;background:var(--blue)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:13px 20px!important;font-weight:700!important;font-size:15.5px;line-height:1.3!important;box-shadow:2px 2px 0 var(--navy);cursor:pointer!important;text-align:center}
.acct-card .um-col-alt-b{padding-top:12px}
.acct-card .um-link-alt{color:var(--blue)!important;font-weight:600;font-size:13.5px;line-height:1.4}
.acct-card .um-field-error{background:#FDECEC;border:1px solid #F0B4B2;border-radius:12px;color:#7A1F1D}
.acct-card .um-field-error a{color:#7A1F1D!important}
.acct-card .um-notice-error{background:#FDECEC;border:1px solid #F0B4B2;border-radius:12px;color:#7A1F1D;padding:12px 14px;font-size:14px;line-height:1.55;margin:0 0 12px}