/*
 * Compatibility stylesheet for Bootstrap-3-era override bodies.
 *
 * 2,272 customer view overrides exist under sites/, and their markup is
 * Bootstrap 3: .container, .row, .col-md-6, .btn-u, .headline and the spacing
 * utilities the old themes shipped. Those files are customer property and are
 * not being edited, so when the refreshed theme renders one of their pages the
 * body must still lay out correctly.
 *
 * This is a deliberately small re-implementation of only the classes those
 * bodies actually use -- a 12-column grid, the button variants and the spacing
 * helpers -- not a copy of Bootstrap. It is loaded only by the compatibility
 * header shim, so pages rendered by the refreshed theme's own templates never
 * pay for it.
 *
 * It is a bridge, not a destination: as sites migrate their overrides, this
 * file shrinks.
 */

/* The pharmacy's own colour, the same values the theme's own stylesheet uses.
   head.php sets --rx-* per request from that site's config.php, so there is
   one stylesheet per theme and the colour arrives at render time. These stated
   the stock blue outright, which meant an override body -- and 2,272 of them
   exist -- painted its buttons #3498db on a pharmacy whose sign is maroon. The
   hex stays only as the fallback for a page served without the variables. */
:root {
  --compat-brand:      var(--rx-primary, #3498db);
  --compat-brand-dark: var(--rx-primary-hover, #2980b9);
  --compat-accent:     var(--rx-accent, #41899b);
  --compat-chrome:     var(--rx-chrome, #263a4c);
}

/* ---- grid ------------------------------------------------------------- */

.container { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: var(--spacing-gutter, 1.5rem); }   /* the theme's page gutter */
.container-fluid { width: 100%; padding-inline: var(--spacing-gutter, 1.5rem); }

.row { display: flex; flex-wrap: wrap; margin-inline: -0.75rem; }
/* :where() carries zero specificity, so the width rules below actually win.
   Without it this selector is (0,2,0), beats `.col-md-8` at (0,1,0), and every
   column is forced to 100% -- which is what an earlier version did. */
:where(.row > [class*="col-"]) { padding-inline: 0.75rem; width: 100%; }

/* Bootstrap's twelve columns, at Bootstrap's breakpoints. */
[class*="col-xs-"] { float: none; }
.col-xs-1{width:8.3333%}   .col-xs-2{width:16.6667%} .col-xs-3{width:25%}
.col-xs-4{width:33.3333%}  .col-xs-5{width:41.6667%} .col-xs-6{width:50%}
.col-xs-7{width:58.3333%}  .col-xs-8{width:66.6667%} .col-xs-9{width:75%}
.col-xs-10{width:83.3333%} .col-xs-11{width:91.6667%} .col-xs-12{width:100%}

@media (min-width: 768px) {
  .col-sm-1{width:8.3333%}   .col-sm-2{width:16.6667%} .col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}  .col-sm-5{width:41.6667%} .col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}  .col-sm-8{width:66.6667%} .col-sm-9{width:75%}
  .col-sm-10{width:83.3333%} .col-sm-11{width:91.6667%} .col-sm-12{width:100%}
  .col-sm-offset-3{margin-left:25%}
}
@media (min-width: 992px) {
  .col-md-1{width:8.3333%}   .col-md-2{width:16.6667%} .col-md-3{width:25%}
  .col-md-4{width:33.3333%}  .col-md-5{width:41.6667%} .col-md-6{width:50%}
  .col-md-7{width:58.3333%}  .col-md-8{width:66.6667%} .col-md-9{width:75%}
  .col-md-10{width:83.3333%} .col-md-11{width:91.6667%} .col-md-12{width:100%}
  .col-md-offset-2{margin-left:16.6667%} .col-md-offset-3{margin-left:25%}
}
@media (min-width: 1200px) {
  .col-lg-3{width:25%} .col-lg-4{width:33.3333%} .col-lg-6{width:50%}
  .col-lg-8{width:66.6667%} .col-lg-12{width:100%}
}

/* ---- visibility ------------------------------------------------------- */

.hidden-xs { display: none; }
.visible-xs { display: block; }
@media (min-width: 768px) {
  .hidden-xs { display: block; }
  .visible-xs { display: none; }
}
/* NOTE: no `.hidden` and no `.sr-only` here, on purpose. The theme stylesheet
   already defines both, and Bootstrap's `.hidden { display:none !important }`
   -- loaded after it -- defeats every responsive `hidden lg:block` in the
   theme's own chrome. An earlier version of this file did exactly that and the
   navigation silently disappeared on every overriding page. */

/* ---- typography and helpers ------------------------------------------- */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.pull-left   { float: left; }
.pull-right  { float: right; }
.clearfix::after { content: ""; display: table; clear: both; }
.img-responsive, .img_responsive { max-width: 100%; height: auto; }
.no-margin-bottom { margin-bottom: 0 !important; }

.headline { display: block; margin: 10px 0 25px; border-bottom: 1px dotted #e4e9f0; }
.headline h2 { font-size: 22px; margin: 0 0 -2px; }
.headline h3, .headline h4 { margin: 0 0 -2px; }

/* The spacing utilities the old themes shipped, generated by hand because the
   override bodies use a fixed, known set. */
.margin-bottom-10{margin-bottom:10px} .margin-bottom-20{margin-bottom:20px}
.margin-bottom-25{margin-bottom:25px} .margin-bottom-30{margin-bottom:30px}
.margin-bottom-40{margin-bottom:40px} .margin-bottom-50{margin-bottom:50px}
.margin-top-15{margin-top:15px} .margin-right-10{margin-right:10px}
.sm-margin-bottom-30{margin-bottom:30px}
.content, .content-sm { padding-block: 40px; }
.content-md { padding-block: 60px; }

/* ---- a row whose columns were converted away --------------------------- */

/* The conversion rewrites Bootstrap's col-* into the theme's own rx-cols, but
   a .row laid out with inline flex keeps its children and loses their widths.
   Staff cards that are col-sm-6 col-md-3 in an original page are bare divs
   here, so they sized to their text and came out two-up in a column and a
   half. Given no width of their own they share the
   row and wrap when there is no space -- which is what the column classes
   said. A child that still HAS a width keeps it. */
/* 9rem, not 12: the story column is narrower than the full-width page these
   were drawn for, and at 12rem the fourth card wrapped alone onto a second
   row three times the width of the three above it. */
.row > div:not([class*="col-"]):not([style*="width"]) { flex: 1 1 9rem; min-width: 0; max-width: 100%; }

/* An icon font the refreshed themes do not load draws nothing, but an empty
   <i> still takes a line box -- 140px wide and no height, a gap above every
   card. One icon set is the rule; this just stops the ghost of another. */
i.fa:empty, span.fa:empty { display: none; }

/* ---- buttons ---------------------------------------------------------- */

/* NOT nowrap. It is right for "Refill" and wrong for a sentence, and the
   pharmacies put sentences in these: one such button, held on one line,
   measured 460px on a 390px screen and took the whole page sideways with it. */
.btn-u {
  display: inline-block; border: 0; cursor: pointer; max-width: 100%;
  padding: 8px 16px; font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--rx-on-btn-accent, #fff); background: var(--compat-accent); text-decoration: none;
  border-radius: 0.375rem; transition: background-color .15s ease;
}
.btn-u:hover, .btn-u:focus { color: var(--rx-on-btn-accent, #fff); filter: brightness(0.94); text-decoration: none; }
.btn-u.rounded, .rounded-2x { border-radius: 0.375rem; }
.btn-u-blue,.btn-u-blue:focus{background:var(--compat-brand);color:var(--rx-on-btn,#fff)} .btn-u-blue:hover{background:var(--compat-brand-dark);color:var(--rx-on-btn-hover,#fff)}
.btn-u-green{background:#27ae60} .btn-u-red{background:#e74c3c}
.btn-u-purple{background:#8e44ad} .btn-u-orange{background:#e67e22}
.btn-u-yellow{background:#f1c40f} .btn-u-dark{background:var(--compat-chrome)}
/* Their own fills, neither the brand nor the accent: white words at rest, on hover and on focus, as before the
   measured button words (owner, 2026-10-20), which are for brand and accent fills only. */
.btn-u-green,.btn-u-red,.btn-u-purple,.btn-u-orange,.btn-u-yellow,.btn-u-dark,.btn-u-green:hover,.btn-u-red:hover,.btn-u-purple:hover,.btn-u-orange:hover,.btn-u-yellow:hover,.btn-u-dark:hover,.btn-u-green:focus,.btn-u-red:focus,.btn-u-purple:focus,.btn-u-orange:focus,.btn-u-yellow:focus,.btn-u-dark:focus{color:#fff}
.btn-u-lg{padding:12px 26px;font-size:16px} .btn-u-sm{padding:6px 12px;font-size:13px}
.btn-block{display:block;width:100%;text-align:center}

/* ---- blocks the old themes used --------------------------------------- */

.promo-box, .service-block-light {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem;
  padding: 1.75rem 1.5rem; text-align: center; height: 100%;
}
.bg-grey{background:#f8fafc} .bg-color-light{background:#f8fafc}
.wrapper{width:100%}

.alert { padding: 0.9rem 1.1rem; border: 1px solid transparent; border-radius: 0.5rem; margin-bottom: 1rem; }
.alert-success{background:#ecfdf5;border-color:#6ee7b7;color:#065f46}
.alert-danger{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.alert-warning,.alert-warning2{background:#fffbeb;border-color:#fcd34d;color:#92400e}
.alert-info{background:#eff6ff;border-color:#93c5fd;color:#1e40af}

.form-control {
  display: block; width: 100%; padding: 0.55rem 0.75rem; font-size: 0.875rem;
  color: #333; background: #fff; border: 1px solid #cbd5e1; border-radius: 0.375rem;
}
.form-control:focus { outline: 0; border-color: var(--compat-brand); box-shadow: 0 0 0 3px rgb(52 152 219 / 0.25); }

table { border-collapse: collapse; }
.table { width: 100%; }
.table > thead > tr > th, .table > tbody > tr > td { padding: 0.6rem; border-bottom: 1px solid #e2e8f0; text-align: left; }

/* ---- page furniture the override bodies rely on ---------------------------
   By use across sites/: .breadcrumbs 1,273 files, .headline 1,092,
   .parallaxBg 797, .parallax-quote 746, .list-unstyled 637. */

/* The title bar under the header: page name left, trail right. */
.breadcrumbs {
  overflow: hidden; padding: 12px 0; background: #fff;
  border-bottom: 1px solid #eee;
}
.breadcrumbs h1 { float: left; margin: 0; font-size: 22px; font-weight: 400; color: #555; line-height: 35px; }
.breadcrumb { float: right; margin: 0; padding: 0; list-style: none; line-height: 35px; font-size: 13px; }
.breadcrumb > li { display: inline-block; color: #777; }
.breadcrumb > li + li::before { content: "/"; padding: 0 8px; color: #ccc; }
.breadcrumb > li a { color: #777; }
.breadcrumb > li.active, .breadcrumb > li.active a { color: var(--compat-brand); }

/* The photographic band carrying a name or a headline. */
.breadcrumbs-v3 {
  position: relative; z-index: 1; padding: 100px 0; text-align: left;
  color: #fff; background-color: #222; background-size: cover; background-position: center center;
}
.breadcrumbs-v3.breadcrumbs-lg { padding: 170px 0; }
.breadcrumbs-v3::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.30); }
.breadcrumbs-v3 h1 { float: none; margin: 0 0 8px; color: #fff; font-size: 40px; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.breadcrumbs-v3 p  { margin: 0; color: #fff; font-size: 24px; font-weight: 200; text-transform: uppercase; }
.breadcrumbs-v3.img-v1 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img1.jpg); }
.breadcrumbs-v3.img-v2 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img2.jpg); }
.breadcrumbs-v3.img-v3 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img4.jpg); }
.breadcrumbs-v3.img-v4 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img5.jpg); }
.breadcrumbs-v3.img-v5 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img6.jpg); }
.breadcrumbs-v3.img-v6 { background-image: url(https://cdn.refillrxconnect.com/themes/next/breadcrumbs/img7.jpg); }

/* The dark quotation band. */
.parallax-quote {
  padding: 100px 0; text-align: center; color: #fff; position: relative; z-index: 1;
  background: #222 url(https://cdn.refillrxconnect.com/themes/next/brand/quote-band.jpg) 50% 0 / cover no-repeat fixed;
}
.parallax-quote::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.72); }
.parallax-quote-in { padding: 0 1rem; }
.parallax-quote-in p { margin: 0; color: #fff; font-size: 28px; font-weight: 400; text-transform: uppercase; line-height: 1.35; }
.parallax-quote-in p::before { content: '" '; } .parallax-quote-in p::after { content: ' "'; }
.parallax-quote-in small { display: block; margin-top: 18px; color: #bbb; font-size: 13px; text-transform: uppercase; }

/* Section headings carry a short brand-coloured rule under the text. */
.headline { border-bottom: 1px dotted #e4e9f0; }
.headline h2, .headline h3, .headline h4 {
  display: inline-block; padding-bottom: 5px; color: #555; font-weight: 400;
  border-bottom: 2px solid var(--compat-brand);
}

/* Pull quotes. */
.hero, blockquote.hero {
  margin: 0 0 24px; padding: 16px 18px; background: #f3f3f3;
  border-left: 2px solid #666; font-size: 14px; font-style: italic; line-height: 1.6; color: #555;
}
.hero small { display: block; margin-top: 8px; color: #777; font-size: 13px; }
.hero small::before { content: "\2014\00A0"; }

.list-unstyled { list-style: none; margin: 0; padding: 0; }
.list-unstyled > li { padding: 2px 0; font-size: 14px; color: #555; }
.md-margin-bottom-40 { margin-bottom: 40px; }
@media (min-width: 992px) { .md-margin-bottom-40 { margin-bottom: 0; } }

/* Body copy in an override inherits the old theme's 14px grey paragraphs.
   :where() again, and for the same reason as the grid: as a plain selector this
   was (0,2,1) and outranked `.parallax-quote-in p` and `.breadcrumbs-v3 p`, so
   the quotation rendered dark-grey-on-dark and the hero subtitle shrank to
   14px. A default must never beat the thing it is a default for. */
:where(.wrapper .container) p { margin: 0 0 12px; color: #555; font-size: 14px; line-height: 1.6; }
:where(.wrapper .container) h2 { font-size: 22px; font-weight: 400; color: #555; }

/* Negative row margins and fixed-attachment bands must not widen the page. */
.wrapper { overflow-x: clip; }

/*
 * Bootstrap 3's modal, enough of it that a customer's own page does not spill.
 *
 * 1,466 override files under sites/ carry theme 1's markup, and a good number
 * of them include a Bootstrap modal: <div class="modal fade"> with the dialog's
 * whole contents inside. Bootstrap's own CSS sets .modal { display: none } and
 * shows it on .in; without those rules the contents are simply part of the
 * page, so a pharmacy's terms or flu-clinic dialog appears as a
 * slab of loose text in the middle of its own page.
 *
 * This restores the hiding, and the showing for anything that still adds .in.
 * It deliberately does NOT reimplement Bootstrap's JavaScript: a
 * data-toggle="modal" link with no script behind it now does nothing visible
 * rather than something wrong, and the theme's own dialogs are native
 * <dialog>s that never had this problem.
 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  overflow: hidden auto;
  outline: 0;
  background: rgb(15 23 42 / .6);
}
.modal.in,
.modal[style*="display: block"],
.modal[style*="display:block"] { display: block; }

.modal-dialog {
  position: relative;
  width: auto;
  max-width: 40rem;
  margin: 2rem auto;
}
.modal-content {
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 10px 40px -10px rgb(0 0 0 / .4);
  padding: 1.5rem;
}
.modal-backdrop { display: none; }   /* ours is on .modal itself */

/* ---- a pharmacy's own 2013 form (.sky-form), drawn like the shared form ----
   Owner, 2026-10-20: "all forms should match the UX/UI of the global forms."
   About a dozen pharmacies' own forms -- job applications, BHRT, COVID test
   and vaccine sign-ups, text-me sign-ups -- are their 2013 sky-forms markup
   (views/<x>-form.view.php inside the page's content). The new designs load
   neither sky-forms.css nor the old themes' bootstrap.css, and Tailwind's
   base layer strips every unclassed field of its border and fill, so these
   forms showed labels over blank space, and on a phone the site's own 2013
   reCAPTCHA rule squeezed the checkbox to nothing -- every phone send came
   back "Captcha Missing".

   This draws them as components/field.php and components/form.php draw the
   shared form, from each design's own tokens: the card, the spacing, labels,
   fields, selects, check boxes, columns (one on a phone), the reCAPTCHA and
   its stand-in, and the submit button. Only form.sky-form is touched (not a
   2013 search box, .page-search-form); no words, no font family. The phone
   reCAPTCHA lines are Drug World's (2026-10-19), not the old global
   '.g-recaptcha iframe' rule, which would also catch the shared captcha. */

/* The shared form's look, as each design draws it: 1-next to 5-next here
   (field.php's classes), 6-next and 7-next below. */
form.sky-form:not(.page-search-form) {
  --sf-gap: 1.25rem;
  --sf-card-bg: #fff; --sf-card-border: 0 solid transparent; --sf-card-radius: var(--radius-lg, .5rem);
  --sf-card-pad: 1.5rem; --sf-card-pad-wide: 2.5rem; --sf-card-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --sf-label-color: var(--color-chrome); --sf-label-size: .875rem; --sf-label-lh: 1.25rem; --sf-label-weight: var(--font-weight-medium, 500);
  --sf-label-gap: .375rem; --sf-label-track: normal;
  --sf-ctl-minh: 0; --sf-ctl-pad: .5rem .75rem; --sf-ctl-border: var(--color-slate-300); --sf-ctl-radius: var(--radius-md, .375rem);
  --sf-ctl-bg: transparent; --sf-select-bg: #fff; --sf-ctl-color: var(--color-ink); --sf-ctl-size: .875rem; --sf-ctl-lh: 1.25rem;
  --sf-ctl-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --sf-ph: var(--color-slate-400);
  --sf-focus-border: var(--color-focus); --sf-focus-outline: none; --sf-focus-offset: 0px;
  --sf-focus-shadow: 0 0 0 2px color-mix(in oklab, var(--color-focus) 30%, transparent), var(--sf-ctl-shadow);
  --sf-bad-border: var(--color-red-400); --sf-bad-bg: var(--sf-ctl-bg);
  --sf-check: 1rem; --sf-check-gap: .625rem; --sf-choice-color: var(--color-slate-700); --sf-choice-size: .875rem; --sf-choice-lh: 1.25rem; --sf-choice-weight: 400;
  --sf-btn-h: 3.25rem; --sf-btn-pad: .625rem 1.75rem; --sf-btn-radius: .5rem; --sf-btn-border: transparent;
  --sf-btn-bg: var(--color-brand); --sf-btn-color: var(--rx-on-btn, #fff);
  --sf-btn-bg-hover: var(--color-brand-dark); --sf-btn-color-hover: var(--rx-on-btn-hover, #fff);
  --sf-btn-size: 1rem; --sf-btn-weight: 600; --sf-btn-lh: 1;
  --sf-btn-shadow: 0 1px 2px rgb(0 0 0 / .12); --sf-btn-shadow-hover: 0 3px 8px -2px rgb(0 0 0 / .22);
}
.theme6 form.sky-form:not(.page-search-form) {
  /* 6-next: its .t6-form-card and labels; its own page-wide rules draw the fields, boxes and button */
  --sf-gap: 24px;
  --sf-card-bg: var(--t6-paper, #fff); --sf-card-border: 1px solid var(--t6-line); --sf-card-radius: 18px;
  --sf-card-pad: 20px; --sf-card-pad-wide: 28px; --sf-card-shadow: none;
  --sf-label-color: var(--t6-navy); --sf-label-size: 13px; --sf-label-lh: 1.5; --sf-label-weight: 650; --sf-label-gap: 9px;
  --sf-select-bg: var(--t6-page); --sf-check: 22px; --sf-check-gap: 12px; --sf-choice-color: var(--t6-navy); --sf-choice-size: 13px; --sf-choice-lh: 22px; --sf-choice-weight: 450;
}
.theme7 form.sky-form:not(.page-search-form) {
  /* 7-next: its .t7-form-paper, [data-field] labels and fields, and .btn-primary .btn-lg */
  --sf-card-bg: #fff; --sf-card-border: 1px solid var(--t7-rule); --sf-card-radius: 6px;
  --sf-card-pad: 27px 22px; --sf-card-pad-wide: 38px 42px; --sf-card-shadow: 0 16px 40px #231f2005;
  --sf-label-color: var(--t7-ink); --sf-label-size: 13px; --sf-label-lh: calc(1.25 / .875); --sf-label-weight: 550; --sf-label-gap: 8px; --sf-label-track: .01em;
  --sf-ctl-minh: 44px; --sf-ctl-pad: 11px 13px; --sf-ctl-border: #b4bab8; --sf-ctl-radius: 3px; --sf-ctl-bg: #fff; --sf-select-bg: #fff;
  --sf-ctl-color: var(--t7-ink); --sf-ctl-size: 15px; --sf-ctl-lh: 1.5; --sf-ctl-shadow: none; --sf-ph: #727c7e;
  --sf-focus-border: #b4bab8; --sf-focus-outline: 2px solid var(--rx-brand-ink); --sf-focus-offset: 3px; --sf-focus-shadow: none;
  --sf-bad-border: #a3413b; --sf-bad-bg: #fffbfa;
  --sf-choice-color: var(--t7-muted); --sf-choice-size: 13px; --sf-choice-lh: calc(13px * 1.25 / .875); --sf-choice-weight: 550;
  --sf-btn-h: 50px; --sf-btn-pad: 14px 23px; --sf-btn-radius: 4px; --sf-btn-border: var(--t7-ink);
  --sf-btn-bg: var(--t7-ink); --sf-btn-color: #fff; --sf-btn-bg-hover: #474345; --sf-btn-color-hover: #fff;
  --sf-btn-size: 15px; --sf-btn-weight: 550; --sf-btn-lh: 1.4; --sf-btn-shadow: none; --sf-btn-shadow-hover: none;
}
@media (max-width: 700px) { .theme7 form.sky-form:not(.page-search-form) { --sf-ctl-size: 16px; } }
@media (min-width: 701px) and (max-width: 1023px) { .theme7 form.sky-form:not(.page-search-form) { --sf-card-pad-wide: 28px; } }
@media (min-width: 601px) and (max-width: 639.98px) { .theme6 form.sky-form:not(.page-search-form) { --sf-card-pad: 28px; } }

/* The card the shared form stands in (pages/_rx-page.php), lined up with the
   page's text where a 2013 .row would push it into the margin; its parts one
   under another, the shared .form-grid's distance apart. */
form.sky-form:not(.page-search-form) {
  display: flex; flex-direction: column; gap: var(--sf-gap);
  box-sizing: border-box; width: 100%; max-width: calc(var(--container-4xl, 56rem) - 2 * var(--spacing-gutter, 1.5rem)); margin-inline: auto; padding: var(--sf-card-pad);
  background: var(--sf-card-bg); border: var(--sf-card-border); border-radius: var(--sf-card-radius); box-shadow: var(--sf-card-shadow);
}
:is(.row, .row > :not([class*="col-"])) > form.sky-form:not(.page-search-form) { width: calc(100% - 1.5rem); }
@media (min-width: 40rem) { form.sky-form:not(.page-search-form) { padding: var(--sf-card-pad-wide); } }
form.sky-form:not(.page-search-form) fieldset { display: flex; flex-direction: column; gap: var(--sf-gap); min-width: 0; margin: 0; padding: 0; border: 0; }
form.sky-form:not(.page-search-form) :is(hr, .row), form.sky-form:not(.page-search-form) > p, form.sky-form:not(.page-search-form) fieldset > p { margin-block: 0; }
form.sky-form:not(.page-search-form) > br, form.sky-form:not(.page-search-form) fieldset > br { display: none; }
form.sky-form:not(.page-search-form) .row :is(.row, hr) + :is(.row, hr) { margin-top: var(--sf-gap); }

/* Columns: one on a phone, the form's own from 40rem; choices .5rem apart;
   a question's answers right under it. */
form.sky-form:not(.page-search-form) .row { margin-inline: -.625rem; row-gap: var(--sf-gap); }
form.sky-form:not(.page-search-form) .row > * { padding-inline: .625rem; margin-bottom: 0; }
form.sky-form:not(.page-search-form) .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) { row-gap: .5rem; }
form.sky-form:not(.page-search-form) > .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) + .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))),
form.sky-form:not(.page-search-form) fieldset > .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) + .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) { margin-top: calc(.5rem - var(--sf-gap)); }
form.sky-form:not(.page-search-form) .row .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) + .row:has(> * > :is(label.checkbox, label.radio, .inline-group)):not(:has(> * > :is(.label, .input, .select, .textarea))) { margin-top: .5rem; }
form.sky-form:not(.page-search-form) .row:has(> * > .label:only-child):has(> * > :is(label.checkbox, label.radio)):not(:has(> * > :is(.input, .select, .textarea))) { row-gap: var(--sf-label-gap); }
@media (max-width: 39.99rem) {
  form.sky-form:not(.page-search-form) .row > :is(.col, [class*="col-"]) { width: 100%; margin-left: 0; }
  form.sky-form:not(.page-search-form) .row > [class*="col-"]:has(> :is(label.checkbox, label.radio):only-child > input[type=radio]) { width: auto; padding-right: 1.5rem; }
}
@media (min-width: 40rem) {
  form.sky-form:not(.page-search-form) .row > .col { flex: none; }
  form.sky-form:not(.page-search-form) .row > .col-1 { width: 8.3333%; }  form.sky-form:not(.page-search-form) .row > .col-2 { width: 16.6667%; }
  form.sky-form:not(.page-search-form) .row > .col-3 { width: 25%; }      form.sky-form:not(.page-search-form) .row > .col-4 { width: 33.3333%; }
  form.sky-form:not(.page-search-form) .row > .col-5 { width: 41.6667%; } form.sky-form:not(.page-search-form) .row > .col-6 { width: 50%; }
  form.sky-form:not(.page-search-form) .row > .col-7 { width: 58.3333%; } form.sky-form:not(.page-search-form) .row > .col-8 { width: 66.6667%; }
  form.sky-form:not(.page-search-form) .row > .col-9 { width: 75%; }      form.sky-form:not(.page-search-form) .row > .col-10 { width: 83.3333%; }
  form.sky-form:not(.page-search-form) .row > .col-11 { width: 91.6667%; } form.sky-form:not(.page-search-form) .row > .col-12 { width: 100%; }
}

/* Labels and help. */
form.sky-form:not(.page-search-form) :is(label.label, .label, legend) {
  display: block; margin: 0 0 var(--sf-label-gap); padding: 0; color: var(--sf-label-color); letter-spacing: var(--sf-label-track);
  font-size: var(--sf-label-size); line-height: var(--sf-label-lh); font-weight: var(--sf-label-weight);
}
form.sky-form:not(.page-search-form) :is(.input, .select, .textarea) { display: block; position: relative; }
form.sky-form:not(.page-search-form) .note { margin-top: .25rem; font-size: .75rem; line-height: 1rem; color: var(--color-slate-500); }
form.sky-form:not(.page-search-form) p[id$="-error"] { margin-bottom: 0; }
/* A 2013 required mark (an asterisk icon inside the field) becomes the shared form's red asterisk after the label. */
form.sky-form:not(.page-search-form) .label:has(+ :is(.input, .select, .textarea) > .fa-asterisk)::after,
form.sky-form:not(.page-search-form) .label:has(> .fa-asterisk)::after { content: "*"; margin-left: .125rem; color: var(--color-red-500); }
form.sky-form:not(.page-search-form) :is(.select > i, .fancy-arrow, .icon-append, .icon-prepend, .input-group-addon:empty, .input-group-addon:has(> .fa-asterisk:only-child)) { display: none; }

/* Fields: the full width of their column (the 2013 location list made St. Croix Valley's phone page 587px wide)... */
form.sky-form:not(.page-search-form) :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=date],
    input[type=number], input[type=password], input[type=url], input[type=search], select, textarea:not(.g-recaptcha-response)) {
  box-sizing: border-box; width: 100%; max-width: 100%; margin: 0;
}
/* ...and drawn as the shared field (6-next draws them with its own page-wide rule). */
form.sky-form:not(.page-search-form):not(.theme6 *) :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=date],
    input[type=number], input[type=password], input[type=url], input[type=search], select, textarea:not(.g-recaptcha-response)) {
  height: auto; min-height: var(--sf-ctl-minh); padding: var(--sf-ctl-pad);
  border: 1px solid var(--sf-ctl-border); border-radius: var(--sf-ctl-radius); background-color: var(--sf-ctl-bg); color: var(--sf-ctl-color);
  font-size: var(--sf-ctl-size); line-height: var(--sf-ctl-lh); font-weight: 400; box-shadow: var(--sf-ctl-shadow);
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, outline-color .15s;
}
form.sky-form:not(.page-search-form):not(.theme6 *) :is(input, textarea)::placeholder { color: var(--sf-ph); opacity: 1; }
form.sky-form:not(.page-search-form):not(.theme6 *) :is(.input, .select, .textarea):not(.state-error):hover :is(input, select, textarea):not([aria-invalid="true"]) { border-color: var(--sf-ctl-border); }
form.sky-form:not(.page-search-form):not(.theme6 *) :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=date],
    input[type=number], input[type=password], input[type=url], input[type=search], select, textarea):focus {
  outline: var(--sf-focus-outline); outline-offset: var(--sf-focus-offset); border-color: var(--sf-focus-border); box-shadow: var(--sf-focus-shadow);
}
form.sky-form:not(.page-search-form):not(.theme6 *) :is(input, select, textarea)[aria-invalid="true"],
form.sky-form:not(.page-search-form):not(.theme6 *) .state-error :is(input, select, textarea) { border-color: var(--sf-bad-border); background-color: var(--sf-bad-bg); }
form.sky-form:not(.page-search-form):not(.theme6 *) :is(input, select, textarea)[aria-invalid="true"]:focus { border-color: var(--color-red-500); }
form.sky-form:not(.page-search-form) select:not([multiple]):not([size]) {
  appearance: none; padding-right: 2.5rem; background-color: var(--sf-select-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .625rem center; background-repeat: no-repeat; background-size: 1.25rem 1.25rem;
}

/* Check boxes and radio buttons: the box beside its words, the words wrapping under themselves. */
form.sky-form:not(.page-search-form) :is(label.checkbox, label.radio) {
  display: block; position: relative; margin: 0; padding: 0 0 0 calc(var(--sf-check) + var(--sf-check-gap));
  font-size: var(--sf-choice-size); line-height: var(--sf-choice-lh); font-weight: var(--sf-choice-weight); color: var(--sf-choice-color);
}
form.sky-form:not(.page-search-form) :is(label.checkbox, label.radio):has(> input[type=radio]) { padding-left: calc(var(--sf-check) + .5rem); }
form.sky-form:not(.page-search-form) :is(label.checkbox, label.radio) > :is(input[type=checkbox], input[type=radio]) {
  position: absolute; left: 0; top: calc((var(--sf-choice-lh) - var(--sf-check)) / 2); margin: 0; opacity: 1;
}
form.sky-form:not(.page-search-form) :is(input[type=checkbox], input[type=radio]) { width: var(--sf-check); height: var(--sf-check); }
form.sky-form:not(.page-search-form) :is(label.checkbox, label.radio) > i:empty { display: none; }
form.sky-form:not(.page-search-form) .inline-group { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

/* Headings inside the form: the design's own (its prose), not the 2013 underline. */
form.sky-form:not(.page-search-form) :is(.headline, .prescription-block-header) { margin: 0; padding: 0; border: 0; }
form.sky-form:not(.page-search-form) :is(h2, h3, h4) {
  display: revert-layer; padding: revert-layer; border: revert-layer;
  font-size: revert-layer; font-weight: revert-layer; color: revert-layer; margin: .75rem 0 0;
}
form.sky-form:not(.page-search-form) > :is(.headline, .prescription-block-header):first-of-type :is(h2, h3, h4) { margin-top: 0; }

/* reCAPTCHA: its stand-in while Google's script comes (components/captcha.php),
   on a phone the checkbox at full height, and smaller where its column is
   narrower than the box, as the shared form's (.captcha-fit). */
form.sky-form:not(.page-search-form) .g-recaptcha { position: relative; min-height: 78px; }
form.sky-form:not(.page-search-form) .g-recaptcha::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; box-sizing: border-box; width: 302px; height: 76px; transform-origin: 0 0;
  background: #f9f9f9; border: 1px solid #d3d3d3; border-radius: 3px; box-shadow: 0 0 4px 1px rgb(0 0 0 / .08); pointer-events: none;
}
form.sky-form:not(.page-search-form) .g-recaptcha > div { position: relative; z-index: 1; transform-origin: 0 0; }
@media (max-width: 480px) {
  form.sky-form:not(.page-search-form) .g-recaptcha > div > div { height: 78px; background: #f9f9f9; }
  form.sky-form:not(.page-search-form) .g-recaptcha > div::before { content: none; }
}
@media (max-width: 23.5rem) {
  form.sky-form:not(.page-search-form) .g-recaptcha { overflow: hidden; }
  form.sky-form:not(.page-search-form) .g-recaptcha > div, form.sky-form:not(.page-search-form) .g-recaptcha::before { transform: scale(.86); }
}
@media (max-width: 21.5rem) {
  form.sky-form:not(.page-search-form) .g-recaptcha > div, form.sky-form:not(.page-search-form) .g-recaptcha::before { transform: scale(.78); }
}
/* ...and in a column far narrower than the box (an old page's own layout) */
form.sky-form:not(.page-search-form) :has(> .g-recaptcha) { container-type: inline-size; }
@container (max-width: 261px) {
  form.sky-form:not(.page-search-form) .g-recaptcha { overflow: hidden; }
  form.sky-form:not(.page-search-form) .g-recaptcha > div, form.sky-form:not(.page-search-form) .g-recaptcha::before { transform: scale(.78); }
}
@container (max-width: 215px) {
  form.sky-form:not(.page-search-form) .g-recaptcha > div, form.sky-form:not(.page-search-form) .g-recaptcha::before { transform: scale(.7); }
}

/* The submit button: components/form.php's (.btn .btn-primary .btn-lg, the full
   width on a phone). Its words follow the shared button's color. 6-next's own
   page-wide rule draws its button. */
form.sky-form:not(.page-search-form):not(.theme6 *) :is(button[type=submit], input[type=submit]) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; float: none;
  box-sizing: border-box; min-height: var(--sf-btn-h); height: auto; padding: var(--sf-btn-pad);
  border: 1px solid var(--sf-btn-border); border-radius: var(--sf-btn-radius); background: var(--sf-btn-bg); color: var(--sf-btn-color);
  font-size: var(--sf-btn-size); font-weight: var(--sf-btn-weight); line-height: var(--sf-btn-lh); text-align: center; text-transform: none;
  cursor: pointer; filter: none; box-shadow: var(--sf-btn-shadow);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
form.sky-form:not(.page-search-form):not(.theme6 *) :is(button[type=submit], input[type=submit]):hover {
  background: var(--sf-btn-bg-hover); color: var(--sf-btn-color-hover); filter: none; box-shadow: var(--sf-btn-shadow-hover);
}
form.sky-form:not(.page-search-form):not(.theme6 *) :is(button[type=submit], input[type=submit]):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
form.sky-form:not(.page-search-form):not(.theme6 *) :is(button[type=submit], input[type=submit]):active { transform: translateY(1px); }
form.sky-form:not(.page-search-form) :is(button[type=submit], input[type=submit]) { align-self: flex-start; width: 100%; max-width: 100%; margin: .25rem 0 0; }
.theme6 form.sky-form:not(.page-search-form) :is(button[type=submit], input[type=submit]) { min-height: 3.25rem; line-height: 1; }
@media (min-width: 40rem) { form.sky-form:not(.page-search-form) :is(button[type=submit], input[type=submit]) { width: auto; } }