.Three_Wrapper .contanier .Images li .UserButtons {
    width: auto;
    top: 14px;
    left: 14px;
    background: transparent;
}

.Three_Wrapper .contanier .Images li .UserButtons .Seen,
.Three_Wrapper .contanier .Images li .UserButtons .NotSeen {
    width: auto;
    margin: 0;
    padding: 0;
    font: inherit;
}

.Three_Wrapper .contanier .Images li .UserButtons .place-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(12, 20, 27, .82);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .32);
    color: #fff;
    font: 700 13px/1 "Roboto", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.Three_Wrapper .contanier .Images li .UserButtons .place-action:hover,
.Three_Wrapper .contanier .Images li .UserButtons .place-action:focus {
    border-color: #f2c66d;
    background: rgba(20, 31, 40, .96);
    color: #f2c66d;
    outline: none;
    transform: translateY(-1px);
}

.Three_Wrapper .contanier .Images li .UserButtons .place-action:focus-visible {
    outline: 3px solid rgba(242, 198, 109, .45);
    outline-offset: 2px;
}

.Three_Wrapper .contanier .Images li .UserButtons .place-action--seen {
    border-color: rgba(123, 211, 158, .7);
    background: rgba(25, 91, 59, .9);
}

.Three_Wrapper .contanier .Images li.Seen {
    border: 3px solid #58a97a;
}

/* Icelandic place names are often long compounds without spaces. Let the
   browser hyphenate them where it can and always keep the fallback break
   inside the card rather than clipping the title at the card edge. */
.Three_Wrapper .contanier .Images li a h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.Three_Wrapper .contanier .Images li a h2 .animal-card-scientific {
    display: block;
    margin-top: 5px;
    font-size: .55em;
    font-weight: 400;
    line-height: 1.25;
}

.AnimalSubCategories {
    max-width: 1130px;
    margin: 0 auto;
    padding: 28px 24px 0;
    text-align: center;
}

.AnimalSubCategories h2 {
    margin: 0 0 17px;
    color: #fff;
    font: 600 24px/1.25 Georgia, serif;
}

.AnimalSubCategories__filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.AnimalSubCategories__filters button {
    min-height: 42px;
    margin: 0;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    background: #293238;
    color: #fff;
    font: 700 14px/1.2 "Roboto", sans-serif;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.AnimalSubCategories__filters button:hover,
.AnimalSubCategories__filters button:focus-visible,
.AnimalSubCategories__filters button.is-active {
    border-color: #f2c66d;
    background: #f2c66d;
    color: #111b21;
}

.AnimalSubCategories__filters button:focus-visible { outline: 3px solid rgba(242, 198, 109, .38); outline-offset: 3px; }
.AnimalSubCategories__filters button span { margin-left: 5px; opacity: .72; }
.AnimalSubCategories + .Images { padding-top: 24px; }
.Three_Wrapper .contanier .Images li[hidden] { display: none !important; }
.SeoIntro--bottom { margin-top: 36px; }

@media (max-width: 600px) {
    .AnimalSubCategories { padding: 22px 12px 0; }
    .AnimalSubCategories__filters { gap: 8px; }
    .AnimalSubCategories__filters button { flex: 1 1 calc(50% - 8px); }
}

.site-notice {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: min(430px, calc(100vw - 32px));
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: rgba(15, 24, 32, .97);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .48);
    color: #fff;
    font-family: "Roboto", sans-serif;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .25s ease, transform .25s ease;
}

.site-notice--visible { opacity: 1; transform: translateY(0); }
.site-notice__icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #f2c66d; color: #101820; font-size: 19px; }
.site-notice__content { flex: 1 1 auto; min-width: 0; }
.site-notice__title { display: block; margin: 1px 26px 5px 0; font-size: 17px; line-height: 1.25; }
.site-notice__message { margin: 0 0 13px; color: #d9dee3; font-size: 14px; line-height: 1.45; }
.site-notice__login { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 7px; background: #d9a441; color: #101820; font-size: 13px; font-weight: 700; }
.site-notice__login:hover, .site-notice__login:focus { background: #f2c66d; color: #101820; }
.site-notice__close { position: absolute; top: 10px; right: 8px; width: 34px; height: 34px; margin: 0; color: #b9c1c8; cursor: pointer; font-size: 20px; }
.site-notice__close:hover, .site-notice__close:focus { color: #fff; }

@media (max-width: 600px) {
    .site-notice { right: 16px; bottom: 16px; left: 16px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .place-action, .site-notice { transition: none !important; }
}