/* Language switcher and the language suggestion banner (FR-10), the country
   button and window (FR-210). Loaded on every page by parts/head.ejs. */

.fp-lang-switcher {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px 0 0;
    font-size: 14px;
    line-height: 1;
}
.fp-lang-switcher > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}
.fp-lang-switcher > summary::-webkit-details-marker {
    display: none;
}
.fp-lang-switcher > summary:hover,
.fp-lang-switcher[open] > summary {
    color: #f91942;
}
.fp-lang-switcher > summary .sl {
    font-size: 17px;
}
.fp-lang-switcher-code {
    font-weight: 600;
    letter-spacing: .5px;
}
.fp-lang-switcher > ul {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1100;
    min-width: 150px;
    margin: 6px 0 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.fp-lang-switcher > ul li {
    margin: 0;
    padding: 0;
}
.fp-lang-switcher > ul a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 9px 18px;
    color: #333;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
.fp-lang-switcher > ul a:hover {
    background: #f6f6f6;
    color: #f91942;
}
.fp-lang-switcher > ul a.current {
    font-weight: 600;
    color: #f91942;
}

/* In the header row: aligned to the top like the sign-in link
   (.header-widget .sign-in has vertical-align: top), otherwise the switcher
   sat ~18px below the other header items. */
#header .header-widget .fp-lang-switcher {
    vertical-align: top;
}

/* Narrow header (hamburger, <=1024px): there is no room for the switcher -
   the right side wrapped to a second row. The languages are items of the
   mobile menu there (li.header-lang in parts/header.ejs). */
@media (max-width: 1024px) {
    #header .header-widget .fp-lang-switcher {
        display: none;
    }
}
.mm-menu .header-lang a.current {
    font-weight: 600;
    color: #f91942;
}

/* Country (FR-210): the flag and the currency code - the country sets the
   currency, the language is the globe and the language code. The header
   button (parts/country-switcher.ejs) is built like the language switcher
   next to it, so the two read as a pair of different settings. style.css
   keeps it hidden under 440px (#header .latent); there the country is an item
   of the mobile menu (li.header-country in parts/header.ejs). */
.fp-country-flag {
    flex: none;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 50%;
}
.fp-country-currency {
    font-weight: 600;
    letter-spacing: .5px;
}
#header .header-widget .header-country {
    align-items: center;
    gap: 3px;
    vertical-align: top;
    margin: 0 4px 0 0;
    padding: 8px 2px;
    border: 0;
    background: none;
    color: #333;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
}
#header .header-widget .header-country .fp-country-flag {
    width: 18px;
    height: 18px;
}
#header .header-widget .header-country .fp-country-currency {
    letter-spacing: 0;
}
@media (min-width: 440px) {
    #header .right-side .header-country {
        display: inline-flex;
    }
}
#header .header-widget .header-country:hover {
    color: #f91942;
}
.mm-menu .header-country .fp-country-flag {
    margin: -2px 6px 0 0;
}
@media (min-width: 440px) {
    .mm-menu .header-country {
        display: none;
    }
}
/* The country button is ~11px wider than the bare flag was: where the header
   row came out exactly full, a menu item now appears ~10px later (the same way
   as the FR-10 shifts below). Checked on every width from 440 to 1600px (step
   1 around the thresholds), en and es, signed in and out; the e2e header
   tests (js_autotests i18n.spec, country-switcher.spec) keep the row single. */
@media (min-width: 490px) and (max-width: 499px) {
    html[lang="es"] #header .right-side .header-signin-label { display: none; }
}
@media (min-width: 840px) and (max-width: 849px) {
    html[lang="es"] #header #navigation .header-sbp { display: none; }
}
@media (min-width: 930px) and (max-width: 939px) {
    #header #navigation .header-microchip-lookup { display: none; }
}
@media (min-width: 1025px) and (max-width: 1039px) {
    html[lang="es"] #header #navigation .header-microchip-lookup { display: none; }
}
@media (min-width: 1100px) and (max-width: 1109px) {
    html[lang="es"] #header #navigation .header-pet-tags { display: none; }
}

/* The country window (views/dlg-ch-country.ejs): what the country changes,
   then the countries. The current one is the blue outline button, the others
   the grey outline (Dan's button rule, FR-171). */
#dlg-ch-country .fp-country-dlg {
    top: 15vh;
    width: calc(100% - 32px);
    max-width: 380px;
}
.fp-country-dlg .modal-box-header {
    padding-right: 44px;
}
.fp-country-dlg .modal-box-content {
    padding: 16px 20px 18px;
}
.fp-country-intro {
    margin: 0 0 14px;
    color: #333;
    font-size: 15px;
    line-height: 1.45;
}
.fp-country-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}
.fp-country-list li {
    margin: 0 0 10px;
    padding: 0;
}
#dlg-ch-country .fp-country-list .ch-country {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 7px 16px;
    border: 1px solid #c8c8c8;
    background: #fff;
    color: #333;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
}
#dlg-ch-country .fp-country-list .ch-country:before {
    display: none;
}
/* bundle.min.css gives these flags width 30px and margin-right 10px */
#dlg-ch-country .fp-country-list .ch-country img {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 50%;
}
.fp-country-list .fp-country-name {
    flex: 1;
}
.fp-country-list .fp-country-currency {
    color: #707070;
}
@media (hover: hover) {
    #dlg-ch-country .fp-country-list .ch-country:hover {
        border-color: #999;
    }
}
#dlg-ch-country .fp-country-list .ch-country.current {
    border-color: #01B9FF;
    color: #01B9FF;
}
#dlg-ch-country .fp-country-list .ch-country.current .fp-country-currency {
    color: #01B9FF;
}
.fp-country-note {
    margin: 0 0 6px;
    color: #707070;
    font-size: 13px;
    line-height: 1.4;
}
.fp-country-note .sl {
    margin-right: 2px;
}

/* The header menu items appear one by one as the window widens (style.css:
   @media min-width 630 / 800 / 930 / 1010 / 1100 / 1160). Those thresholds
   were made for English labels and a header without the switcher; above
   1024px the switcher takes ~65px, and Spanish labels are longer. The same
   items appear later here, otherwise the right side of the header wraps to a
   second row. Checked on every width from 320 to 1600px (step 10), signed in
   and out, en and es. Items that are hidden stay in the mobile menu / the
   user menu. A new language with longer labels needs its own shifts. */
@media (min-width: 1025px) and (max-width: 1079px) {
    #header #navigation .header-pet-tags { display: none; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
    #header #navigation .header-microchips { display: none; }
}
@media (min-width: 1160px) and (max-width: 1259px) {
    #header #navigation .header-dash-pets { display: none; }
}
@media (min-width: 630px) and (max-width: 679px) {
    html[lang="es"] #header #navigation .header-laf { display: none; }
}
@media (min-width: 800px) and (max-width: 839px) {
    html[lang="es"] #header #navigation .header-sbp { display: none; }
}
@media (min-width: 930px) and (max-width: 979px) {
    html[lang="es"] #header #navigation .header-microchip-lookup { display: none; }
}
@media (min-width: 1010px) and (max-width: 1099px) {
    html[lang="es"] #header #navigation .header-pet-tags { display: none; }
}
@media (min-width: 1100px) and (max-width: 1239px) {
    html[lang="es"] #header #navigation .header-microchips { display: none; }
}

/* Translations are longer than English (Spanish needs ~80px more in the
   desktop header): slightly tighter menu items keep the header on one row. */
#header #navigation.style-1 > ul > li > a {
    padding-left: 8px;
    padding-right: 8px;
}

/* FR-209: signed in, "Mis mascotas" is in the Spanish row from 1260px, where
   "My pets" is in the English one (narrower, in both languages it is in the
   user menu under the avatar, and under 1160px in the mobile menu too). The
   container stops at 1240px, and with the 22px between items the Spanish row
   was 35px too long for it, so FR-10 hid the item there. Instead the Spanish
   items stand closer from 1260px (14px, the font stays), signed in or not, so
   the Spanish menu does not shift on sign-in. Measured 2026-10-07, signed in:
   the row then has 21px to spare in Chromium, 26px in WebKit and Firefox,
   31px with the fallback font (English: 47-51px). Longer labels or a wider
   right side need a new measurement; js_autotests header-my-pets.spec.js
   checks that the row holds the item. */
@media (min-width: 1260px) {
    html[lang="es"] #header #navigation.style-1 > ul > li {
        margin-left: 2px;
        margin-right: 2px;
    }
    html[lang="es"] #header #navigation.style-1 > ul > li > a:not(.button) {
        padding-left: 5px;
        padding-right: 5px;
    }
    /* "Buscar por foto" keeps its padding inside the border, as in English */
    html[lang="es"] #header #navigation.style-1 > ul > li > a.button {
        margin-right: 0;
    }
}

.fp-lang-banner {
    position: relative;
    z-index: 1001;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    padding: 9px 44px 9px 16px;
    background: #fff4e5;
    border-bottom: 1px solid #f3dcbc;
    color: #555;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
}
.fp-lang-banner-action {
    font-weight: 600;
    color: #f91942;
    white-space: nowrap;
}
.fp-lang-banner-close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #888;
    font-size: 22px;
    line-height: 32px;
    cursor: pointer;
}
.fp-lang-banner-close:hover {
    color: #333;
}

/* Footer (FR-166): the bottom right cell holds the social icons and the
   switcher on one line, centred like the other two cells of the row (fits
   down to a 320px phone; narrower, the switcher wraps under the icons). */
#footer .fp-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 6px;
}
/* The icons line up with the switcher exactly: the theme's floated icons
   (li margin-top 11px) left the list 8px taller than the icons, so the flex
   line centred the list, not the icons. A flex list is as tall as its icons. */
#footer .fp-footer-social .social-icons {
    display: flex;
    margin: 0;
}
#footer .fp-footer-social .social-icons li {
    margin-top: 0;
}
/* The switcher itself: a small bordered button with the globe and the code of
   the current language (FR-210: not a flag), grey like the footer text. The
   list opens upwards: it is the bottom of the page. */
#footer .fp-lang-switcher-footer {
    margin: 0;
    font-size: 13px;
}
#footer .fp-lang-switcher-footer > summary {
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    color: #707070;
}
#footer .fp-lang-switcher-footer > summary:hover,
#footer .fp-lang-switcher-footer[open] > summary {
    border-color: #bbb;
    color: #333;
}
#footer .fp-lang-switcher-footer > summary .sl {
    font-size: 15px;
}
.fp-lang-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
#footer .fp-lang-switcher-footer[open] .fp-lang-caret {
    transform: rotate(180deg);
}
#footer .fp-lang-switcher-footer > ul {
    top: auto;
    bottom: 100%;
    margin: 0 0 6px;
}
/* the list looks like the header one: #footer a (bundle.min.css) would make
   every item a blue link */
#footer .fp-lang-switcher-footer > ul a {
    color: #333;
}
#footer .fp-lang-switcher-footer > ul a:hover,
#footer .fp-lang-switcher-footer > ul a.current {
    color: #f91942;
}

@media (max-width: 767px) {
    .fp-lang-switcher {
        margin-right: 6px;
    }
    .fp-lang-switcher > summary {
        padding: 8px 4px;
    }
}