/* footer, cookie banner, floating WhatsApp
   Part of the split style.css. inc/enqueue.php enqueues each file as
   its own <link>, in filename order -- they are NOT concatenated, so a
   comment or a rule cut across the join does not heal at the seam. It
   breaks both files, and the browser drops everything it cannot parse
   without saying so. Keep every construct whole inside one file.
   Source order is still the cascade, so moving a rule between files
   can change which one wins. */

/* The primary action inverted, because it sits on --pet-primary itself: a
   green fill on a green panel would disappear, so the surface and the
   primary swap roles here. #fff against --pet-primary is 7.42, and the
   green label on the white pill is the same 7.42 the other way round. */
.pet-contact-form button { background: var(--pet-surface); border: 1px solid var(--pet-surface); box-sizing: border-box; line-height: 1.2; border-radius: 999px; color: var(--pet-primary); cursor: pointer; flex: 0 0 auto; font-size: .84rem; font-weight: 800; min-height: 42px; padding: .55rem 1rem; transition: box-shadow .2s, transform .2s; }
.pet-contact-form button:hover { background: var(--pet-primary-soft); box-shadow: 0 10px 24px color-mix(in srgb, var(--pet-shadow-color-on-dark) 20%, transparent); color: var(--pet-primary-hover); transform: translateY(-2px); }
/* The live region spans the form grid so a message is never squeezed into one
   column. While it holds nothing there is nothing to announce, so it is taken
   out of the layout entirely -- left in place it would occupy a grid cell plus
   a gap and open a hole above the first field. The message itself arrives with
   a full page load, so the region is present and visible whenever it matters. */
.pet-contact-form .pet-form-notice-region { grid-column: 1 / -1; }
.pet-form-notice-region:empty { display: none; }
.pet-form-notice { border-radius: 10px; font-size: .82rem; font-weight: 700; line-height: 1.45; margin: 0; padding: .75rem .9rem; }
/* Each status ink paired with the soft ground it was measured against:
   --pet-success on --pet-success-soft is 4.56, --pet-danger on
   --pet-danger-soft is 4.50. Previously both grounds were one-off hex
   values with no token and no recorded pairing. */
.pet-form-notice.is-success { background: var(--pet-success-soft); color: var(--pet-success); }
.pet-form-notice.is-error { background: var(--pet-danger-soft); color: var(--pet-danger); }
.pet-form-trap { display: none !important; }

/* The compact contact block: what the footer shows instead of
   .pet-contact-panel on a page carrying its own transaction (cart, checkout,
   account, a product) or on reference reading (guides, legal, 404). The rule
   that picks between them is pet_town_contact_variant_for_path() in
   inc/page-context.php; the full panel's own rules are in 20-hero.css, and
   this one lives beside the footer because it never appears anywhere else.

   It reuses .pet-contact-meta and .pet-contact-links unchanged -- those are
   unscoped, so the address block, the RTL border flip and the 48px touch
   targets under 560px all arrive for free. Only the two things the panel
   scopes to itself, its h2 colour and its body copy colour, are restated here.

   No media query: one wrapping flex row collapses to a column on its own,
   which is why nothing had to be added to 60-legal.css's 780px block. */
.pet-contact-cta { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; margin: 0 auto; max-width: 1280px; padding-bottom: .5rem; }
.pet-contact-cta-copy { flex: 1 1 18rem; }
.pet-contact-cta h2 { color: var(--pet-surface); font-size: clamp(1.35rem, 2.2vw, 1.9rem); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .35rem; }
.pet-contact-cta p { color: var(--pet-primary-soft); font-size: .95rem; line-height: 1.55; margin: 0; max-width: 46ch; }
.pet-contact-cta-details { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 1rem 1.5rem; }
/* The panel gives .pet-contact-meta a top margin because it sits under a
   paragraph there. Here it is a row item, so the margin would only push it off
   the baseline of the links beside it. */
.pet-contact-cta .pet-contact-meta { margin-top: 0; }
.pet-contact-cta .pet-contact-links { justify-content: flex-start; }
/* Inverted for the same reason .pet-contact-form button is: this pill sits on
   --pet-primary itself, so a green fill would disappear into the footer. #fff
   on --pet-primary is 7.42 and the green label on the white pill is the same
   7.42 the other way round -- the pairing --pet-primary already records. */
.pet-contact-cta-action { background: var(--pet-surface); border-radius: 999px; color: var(--pet-primary); display: inline-flex; flex: 0 0 auto; font-size: .84rem; font-weight: 800; min-height: 44px; align-items: center; padding: .55rem 1.25rem; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; }
.pet-contact-cta-action:hover { background: var(--pet-primary-soft); box-shadow: 0 10px 24px color-mix(in srgb, var(--pet-shadow-color-on-dark) 20%, transparent); color: var(--pet-primary-hover); transform: translateY(-2px); }
.pet-contact-cta-action:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 3px; }

.pet-footer-bottom { align-items: center; border-top: 1px solid color-mix(in srgb, var(--pet-surface) 18%, transparent); display: grid !important; gap: 1.25rem; grid-template-columns: auto minmax(0, 1fr) auto; margin: 1.25rem auto 0; max-width: 1280px !important; padding-top: .75rem; width: 100%; }
.pet-footer-bottom > * { justify-self: center; margin: 0; text-align: center; }
.pet-footer-bottom > :first-child { justify-self: start; }
.pet-footer-bottom > :nth-child(2) { white-space: nowrap; }
.pet-footer-bottom > :last-child { justify-self: end; }
.pet-footer-bottom a, .pet-footer-bottom p { color: var(--pet-surface); }
.pet-footer-bottom .pet-privacy-link { font-size: .76rem; opacity: .72; text-decoration: underline; text-underline-offset: 3px; }
.pet-footer-bottom .pet-privacy-link:hover { opacity: 1; }
/* Privacy and Terms now travel together as one grid item, placed in the middle
   column so they sit under the copyright line rather than alone at the far
   left. The explicit column is needed because they are the fourth item in a
   three-column grid: left to auto-placement they would start the second row in
   column one, which is exactly the position being moved away from. */
.pet-footer-bottom .pet-footer-legal { column-gap: 1.25rem; display: flex; flex-wrap: wrap; grid-column: 2; justify-content: center; justify-self: center; row-gap: .35rem; }
.pet-footer-bottom > :last-child { grid-column: 3; }
.pet-whatsapp-float { align-items: center; background: var(--pet-whatsapp); border: 3px solid var(--pet-surface); border-radius: 999px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--pet-whatsapp-lift, 0px)); box-shadow: 0 8px 24px color-mix(in srgb, var(--pet-shadow-color) 24%, transparent); color: var(--pet-surface); display: inline-flex; font-size: .9rem; font-weight: 800; gap: 9px; min-height: 58px; padding: 0 18px; position: fixed; right: max(20px, env(safe-area-inset-right)); text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; z-index: 9999; }
.pet-whatsapp-float svg { fill: currentColor; flex: 0 0 auto; height: 27px; width: 27px; }
.pet-whatsapp-float:hover { background: var(--pet-whatsapp-hover); box-shadow: 0 12px 28px color-mix(in srgb, var(--pet-shadow-color) 32%, transparent); color: var(--pet-surface); transform: translateY(-2px); }
.pet-whatsapp-float:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 4px; }
.pet-whatsapp-float-rtl { left: max(20px, env(safe-area-inset-left)); right: auto; }
.pet-whatsapp-button { align-items: center; background: var(--pet-whatsapp); border: 3px solid var(--pet-surface); border-radius: 999px; box-shadow: 0 8px 24px color-mix(in srgb, var(--pet-shadow-color) 24%, transparent); color: var(--pet-surface); display: inline-flex; font-size: .9rem; font-weight: 800; gap: 9px; min-height: 52px; padding: 0 1.25rem; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s; }
.pet-whatsapp-button svg { fill: currentColor; flex: 0 0 auto; height: 24px; width: 24px; }
.pet-whatsapp-button:hover { background: var(--pet-whatsapp-hover); box-shadow: 0 12px 28px color-mix(in srgb, var(--pet-shadow-color) 32%, transparent); color: var(--pet-surface); transform: translateY(-2px); }
.pet-whatsapp-button:focus-visible { outline: 3px solid var(--pet-focus); outline-offset: 4px; }

/* Bottom centre, resting on the same line as the floating WhatsApp button.
   Centre because both corners are occupied -- WhatsApp takes one (and mirrors
   to the other in Hebrew) and the banner the remaining one. 48px keeps it
   inside a comfortable touch target while staying visibly smaller than the
   WhatsApp button, which is the primary action.

   Its own lift variable, not WhatsApp's. Sharing one was measured wrong: the
   banner is left-aligned and 620px wide, so at 1361px it reached past centre
   and under this button while leaving the right-hand WhatsApp button clear --
   which meant no lift was set and this button clipped the banner's corner.
   cookie-consent.js measures each float separately. */
.pet-back-to-top-float { align-items: center; background: color-mix(in srgb, var(--pet-primary-active) 88%, transparent); border: 2px solid var(--pet-surface); border-radius: 999px; bottom: calc(max(20px, env(safe-area-inset-bottom)) + var(--pet-back-to-top-lift, 0px)); box-shadow: 0 8px 24px color-mix(in srgb, var(--pet-shadow-color) 24%, transparent); color: var(--pet-surface); display: inline-flex; font-size: 1.35rem; height: 48px; justify-content: center; left: 50%; line-height: 1; position: fixed; text-decoration: none; transform: translateX(-50%); transition: background .2s, transform .2s; width: 48px; z-index: 9998; }
.pet-back-to-top-float:hover { background: var(--pet-primary); transform: translateX(-50%) translateY(-2px); }
.pet-back-to-top-float[hidden] { display: none; }
/* inset-inline-start rather than left, so the banner starts on the side the
   page is read from: left in Russian and English, right in Hebrew. It used to
   sit on the left in every language, which put it at the far end of an RTL
   page. Moving it also changes which floating buttons it covers, and nothing
   here needs to know that -- cookie-consent.js measures each float against the
   banner wherever it lands. */
.pet-cookie-banner { align-items: center; background: var(--pet-primary); border: 1px solid color-mix(in srgb, var(--pet-surface) 25%, transparent); border-radius: 16px; bottom: 20px; box-shadow: 0 10px 30px color-mix(in srgb, var(--pet-shadow-color-on-dark) 22%, transparent); color: var(--pet-surface); display: flex; gap: 1rem; inset-inline-start: 20px; max-width: 620px; padding: 1rem 1.2rem; position: fixed; z-index: 30; }
.pet-cookie-banner[hidden] { display: none !important; }
.pet-cookie-banner p { font-size: .85rem; line-height: 1.4; margin: 0; }
.pet-cookie-accept { background: var(--pet-surface); border: 0; border-radius: 999px; color: var(--pet-primary); cursor: pointer; font-weight: 800; padding: .65rem 1rem; white-space: nowrap; }
/* Same size and prominence as accept -- a reject option that is visually
   weaker than accepting is not a real choice. Outlined rather than filled
   only so the two are distinguishable at a glance. */
.pet-cookie-reject { background: transparent; border: 2px solid color-mix(in srgb, var(--pet-surface) 55%, transparent); border-radius: 999px; color: var(--pet-surface); cursor: pointer; font-weight: 800; padding: .65rem 1rem; white-space: nowrap; }
.pet-cookie-reject:hover { border-color: var(--pet-surface); }
.pet-cookie-policy { color: var(--pet-accent-soft); }
.pet-cookie-close { background: transparent; border: 0; color: var(--pet-surface); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: .2rem; }
/* No padding-bottom: this is always immediately followed by .pet-footer,
   so reserving clearance for the floating WhatsApp button here just left a
   visible gap of bare page background before the footer started. */
.pet-section-page { color: var(--pet-text); margin: 0 auto; max-width: 1280px; width: calc(100vw - 48px); }
.pet-section-hero { background: var(--pet-primary-soft); border-radius: 28px; padding: clamp(3rem, 8vw, 7rem); }
.pet-pets-page .pet-section-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }

/* The wordmark is one asset serving two very different grounds: the header's
   cream, where its warm brown reads perfectly, and this footer's --pet-primary
   green (#285E57), where the same brown all but vanishes -- reported from a
   phone on 2026-08-24. Rather than ship a second logo file to keep in sync,
   flatten this instance to solid white: brightness(0) drives every channel to
   black regardless of the source colours, invert(1) then lifts it to white, so
   the rule keeps working if the logo is ever redrawn. #fff on #285E57 is 7.42
   (the token's own comment records it), comfortably past AA.
   Opacity, not grey, for the hover: a filtered image cannot take a colour
   change, and the header's translateY lift already covers the header copy. */
.pet-footer .pet-wordmark img {
  filter: brightness(0) invert(1);
}
.pet-footer .pet-wordmark {
  opacity: .92;
  transition: opacity .2s, transform .2s;
}
.pet-footer .pet-wordmark:hover,
.pet-footer .pet-wordmark:focus-visible {
  opacity: 1;
}