:root {
  --theme-color: #ff9533;
}

.balsamiq-sans-regular {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 400 !important;
  font-style: normal;
}

.balsamiq-sans-bold {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 700 !important;
  font-style: normal;
}

.balsamiq-sans-regular-italic {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 400 !important;
  font-style: italic;
}

.balsamiq-sans-bold-italic {
  font-family: "Balsamiq Sans", sans-serif;
  font-weight: 700 !important;
  font-style: italic;
}

.gluten-normal {
  font-family: "Gluten", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

.closebtn {
  font-size: 40px !important;
}

.xt_navigation_wrapper a {
  font-family: "Gluten", cursive;
  font-size: 17px;
}

#main-footer .site-logo {
  height: 50px;
}

.sub_title_section a {
  font-family: "Gluten", cursive;
}

.help-block {
  color: #791414;
}

.country-block {
  text-align: center;
  font-size: 20px;
  color: #004606;
}

.validReg {
  border-color: #004606 !important;
}

.recent-footer {
  justify-content: center;
}

.recent-footer div, .recent-footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  max-height: 100px;
  max-width: 100px;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.footer-gallery {
  object-fit: cover;
  object-position: 50% 50%;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
}

.fs-7 {
  font-size: 0.875rem !important;
}

.fs-8 {
  font-size: 0.75rem !important;
}

.logThumb {
  height: 75px;
  width: 75px;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.imgPublic {
  border: 2px solid #004606;
}

.imgPrivate {
  border: 2px solid #b10000;
}

.text-info {
  color: #ff9a00 !important;
  
}

#resend {
  cursor: pointer;
  
}

.text-theme {
  color: var(--theme-color) !important;
}

/* NEW LOG FORM */

#newLogForm .card {
  height: 100%;
  text-align: center;
  background-color: #ffdfb9;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}

#newLogForm #chooseLog .card:hover {
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.75);
  transform: translate(1px, 1px);
  transition: all 0.1s;
}

#newLogForm .card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  cursor: pointer;
  padding: 10px 0.5vw;
}

#newLogForm .card-title {
  font-family: "Gluten", cursive;
  font-size: 24px;
  padding: 10px;
}

#newLogForm .card-text {
  font-size: 16px;
  line-height: normal;
}

#newLogForm input:read-only {
  background-color: #f2f2f2;
  border: none;
  pointer-events: none;
}

#logRegistration {
  font-size: 36px;
  text-transform: uppercase;
  font-weight: bold;
  border: 2px solid #ff9533;
  line-height: 40px;
  padding-top: 15px;
}

/* END NEW LOG FORM */

/* DataTables */

.dt-length label {
  padding-left: 10px;
}

.statusIcon {
  width:100px;
  padding:5px;
}

.logLink {
  white-space: nowrap;
}

.logLink a {
  color: #000063;
}

.statusIconLog img {
  margin-top:9px;
  height:56px;
  width:75px;
}

.logImgBox {
    min-height:300px;
    flex-wrap: wrap;
}

.logImgBox img {
    max-width: 98%;
    max-height: 98%;
    object-fit: contain;
    box-shadow: 1px 1px 12px #777;
    border-radius: 10px;
}

.logImgBox img:hover {
    box-shadow: 1px 1px 18px #cfcfcf;
    transform: scale(1.02);
    transition: 0.4s;
}

select option {
  padding: 0 10px;
  font-family: 'Baloo 2', cursive;
}

.text-justify {
  text-align: justify;
}

a.text-theme:hover {
  color: #c25e02 !important;
}

.noPhotoIcon {
  font-size: 75px;
  opacity: 0.1;
}

.privacyIcon {
  font-size: 40px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height:75px;
}

.privacyPublic {
  color: #002403;
}

.privacyPrivate {
  color:#791414;
}

.aboutText p {
  font-size:1.05rem;
  line-height:1.5;
}

#gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  row-gap: 5px;
  padding: 10px;
  justify-content: center;
  
}

.galleryItem {
  height: 125px;
  flex-grow: 5;
}

.galleryItem img {
  max-height: 100%;
  min-width:100%;
  height: 150px;
  object-fit: cover;
  vertical-align: bottom;
  border-radius: 5px;
}

.galleryItem:last-child {
  flex-grow: 30;
}

/* Hover card for photo thumbnails, site-wide: the .tipHost wrapper positions it,
   tools::photoTip() builds the markup and /assets/js/phototip.js keeps it on
   screen. Shown on pointer devices only — touchscreens have no hover, and a
   tapped card would linger behind the lightbox it just opened. */

.tipHost {
  position: relative;
  display: inline-block;
}

/* The footer thumbs crop themselves with overflow:hidden on the link, so the
   column hosting the card has to let it out again */
.recent-footer .tipHost {
  overflow: visible;
}

.photoTip {
  display: none;
}

@media (hover: hover) and (pointer: fine) {

  .tipHost img {
    transition: filter .16s ease, box-shadow .16s ease;
  }

  .tipHost:hover img,
  .tipHost:focus-within img {
    filter: brightness(1.06);
    box-shadow: 0 0 0 2px var(--theme-color);
  }

  .photoTip {
    display: block;
    position: absolute;
    left: 50%;
    bottom: calc(100% + 9px);
    z-index: 20;
    width: max-content;
    max-width: min(260px, 60vw);
    padding: 9px 12px 10px;
    background: rgba(30, 27, 24, .95);
    color: #f6f3f0;
    text-align: left;
    font-size: .78rem;
    line-height: 1.45;
    border-radius: 10px;
    /* the hairline keeps the card readable against the dark footer too */
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    /* --tip-shift nudges cards on edge thumbnails back inside the viewport,
       set per card by the gallery script; the arrow stays on the thumbnail */
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 5px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
    pointer-events: none;
  }

  .photoTip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - var(--tip-shift, 0px));
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: rgba(30, 27, 24, .95);
  }

  .tipHost:hover .photoTip,
  .tipHost:focus-within .photoTip {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--tip-shift, 0px)), 0);
    transition-delay: .1s;
  }

  .photoTip-reg {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    letter-spacing: .4px;
    color: var(--theme-color);
  }

  .photoTip-model {
    display: block;
    font-size: .72rem;
    letter-spacing: .3px;
    color: rgba(246, 243, 240, .6);
  }

  .photoTip-row {
    display: block;
    position: relative;
    padding-left: 18px;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .photoTip-row i {
    position: absolute;
    left: 0;
    top: .35em;
    width: 12px;
    font-size: .7rem;
    text-align: center;
    color: rgba(246, 243, 240, .45);
  }

  .photoTip-ago {
    color: rgba(246, 243, 240, .5);
  }

  .photoTip-note {
    color: #ffc9a3;
  }

  .photoTip-ago::before {
    content: "·";
    margin: 0 4px;
  }
}

@media (max-aspect-ratio: 1/1) {
  .galleryItem {
     /* height: 30vh; */
  }
}

@media (max-height: 480px) {
  .galleryItem {
     height: 50vh;
  }
}

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  #gallery {
     flex-direction: row;
  }

  .galleryItem {
     height: 100px;
  }

  .galleryItem img {
    height: 100px;
  }
}

#balloonGallery {

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  row-gap: 5px;
  padding: 10px;

}

.balloonGalleryItem {
  position: relative;

  /* The archive tab draws about 4,100 of these on one page. Without this the
     browser lays out and paints every tile before it can show the first screen;
     with it, off-screen tiles cost nothing until they are scrolled near.

     contain-intrinsic-size is the placeholder each skipped tile stands in for —
     125px of picture plus its caption — so the scrollbar is honest and the page
     does not jump as tiles are realised. It has to be stated: a tile with
     content-visibility and no intrinsic size measures zero. */
  content-visibility: auto;
  contain-intrinsic-size: 125px 150px;
}

/* Display square images that are 100px by 100px and wrap */

.balloonGalleryItem img {
  width:125px;
  max-width:28vw;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* The caption under a thumbnail — the credit, and where and when. Held to the
   width of the image, because the tile is a flex item with no width of its own
   and a caption wider than 125px makes the item wider than its own picture,
   which is what breaks the row's alignment rather than merely looking untidy.

   One line and an ellipsis rather than a two-line clamp: every tile is then the
   same height whatever it carries, which is what a grid of thousands needs, and
   it is what _PhotoTile does in the app with the same credit. The clip loses
   nothing — the full text is on the element's title, in the lightbox caption
   and in the hover tip. */

.balloonGalleryItem-cap {
  width: 125px;
  max-width: 28vw;
  line-height: 1.2;
  min-height: 1.2em;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weatherRow div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
padding:10px 0px;
}
.weatherRow i {
  margin-bottom: 5px;
  font-size:32px;
}

.adminPhotoAdd {
  position: absolute;
  bottom: 30px;
  right: 10px;
  color: #ca6200;
  text-shadow: 1px 1px 2px #000;
}

.featuredPhoto {
  max-height:300px;
  max-width:50%;
  float:left;
  margin: 0px 20px 20px 0px;
  border-radius: 5px;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

#lastLog {
  text-align: center;
  margin-top:5px;
  color: #b10000;
}

.reportImage {
  color: #b10000 !important;
  padding-left:15px;
  font-size: 0.9rem;
}

#reportImageModal {
  z-index:100000;
}

.dt-input {
  font-size:1.2rem;
  color:#a03b00 !important;
  padding:5px;
  line-height: 30px;
}

.tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  row-gap: 5px;
  padding: 10px;
  justify-content: center;
}

#drop-area.dragover,
#file-area.dragover {
  background: #e3e3ff;
  border-color: #007bff;
}

/* Quick photo drop targets in the logs table */
.logPhotoCell {
  min-width: 90px;
  transition: background 0.15s ease;
}

.logPhotoCell.dragover {
  background: #e3e3ff;
  outline: 2px dashed #007bff;
  outline-offset: -4px;
}

.logPhotoCell.dragover > * {
  pointer-events: none;
  opacity: 0.4;
}

/* The log page image area doubles as a drop target for its owner */
.logImgBox[data-logid] {
  transition: background 0.15s ease;
}

.logImgBox.dragover {
  background: #e3e3ff;
  outline: 2px dashed #007bff;
  outline-offset: -8px;
  border-radius: 10px;
}

.logImgBox.dragover > * {
  pointer-events: none;
  opacity: 0.4;
}

/* Privacy chip sitting over a log photo (owner only) */
.logImgWrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}

/* The wrapper is sized by the photo, so let it fill rather than the 98% the
   photo uses when it sits directly in the (padded) box */
.logImgWrap img {
  max-width: 100%;
  max-height: 100%;
}

.imgPrivacyForm {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  line-height: normal;
  z-index: 2;
}

.imgPrivacyChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(30, 30, 30, 0.72);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.imgPrivacyChip i {
  font-size: 1rem;
  line-height: 1;
}

.imgPrivacyChip.is-public {
  background: rgba(0, 70, 6, 0.78);
}

.imgPrivacyChip.is-private {
  background: rgba(129, 0, 0, 0.78);
}

/* The log itself is private, so the photo is hidden either way */
.imgPrivacyChip.is-moot {
  background: rgba(60, 60, 60, 0.72);
}

.imgPrivacyChip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  filter: brightness(1.2);
}

.imgPrivacyChip:focus-visible {
  outline: 2px solid #ff9a00;
  outline-offset: 2px;
}

.imgPrivacyChip.is-busy {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

.quickDropBusy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 75px;
  color: #ff9a00;
}

/* Sighting cards (/latest). Photo-led and mobile-first: two to a row on a phone,
   filling out as the viewport grows. The registration is the headline and
   everything under it is small print.

   The hover card (tools::photoTip) hangs above its thumbnail and has to escape
   the card, so the corners are rounded on the media itself rather than by
   clipping the card with overflow:hidden. Link colours are set on a.class so
   they outrank the template's own a:hover, which loads after this file. */

#sightingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}

.sightingCard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #f0e4d5;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.sightingCard-media {
  display: block;
  line-height: 0;
}

.sightingCard-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 11px 11px 0 0;
  /* holds the card's shape while the lazy-loaded photo is still on its way */
  background: #f7eee4;
}

.sightingCard-noPhoto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 11px 11px 0 0;
  background: linear-gradient(155deg, #fdf4ea, #f2e5d5);
  color: #d3ab7d;
  font-size: 2.1rem;
  line-height: 1;
}

.sightingCard-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px 9px;
}

a.sightingCard-reg {
  font-family: "Gluten", cursive;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #000063;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.sightingCard-reg:hover,
a.sightingCard-reg:focus {
  color: var(--theme-color);
}

.sightingCard-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #6f665e;
}

.sightingCard-meta i {
  flex: 0 0 auto;
  width: 11px;
  font-size: 0.68rem;
  text-align: center;
  color: #bda98f;
}

.sightingCard-meta span {
  font-size: inherit;
  line-height: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A county and a country rarely fit a card's width on one line, and cutting the
   country off tells the reader least — so let the location have a second line */
.sightingCard-loc {
  align-items: flex-start;
}

.sightingCard-loc i {
  margin-top: 0.25em;
}

.sightingCard-loc span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.sightingCard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  margin-top: auto;
  padding-top: 4px;
}

a.sightingCard-date {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
  color: var(--theme-color);
}

a.sightingCard-date:hover,
a.sightingCard-date:focus {
  color: #c25e02;
}

@media (hover: hover) and (pointer: fine) {

  .sightingCard {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .sightingCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  }

  /* the tip's own hover styling rings the thumbnail; square off the bottom
     corners so the ring follows the top of the card */
  .sightingCard .tipHost:hover img,
  .sightingCard .tipHost:focus-within img {
    box-shadow: inset 0 0 0 2px var(--theme-color);
  }
}

@media (min-width: 576px) {

  #sightingGrid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
  }
}
/* The home page hero strapline, which is also the page's <h1>.
   Matches .carousel-captions .content p exactly — see style.css and
   responsive.css — because it is the same line of text in the same place, and
   only the element name changed. Same selector depth so the specificity lands
   where the paragraph rule's did. */

.slider-area .carousel-inner .carousel-item .carousel-captions .content h1.heroStrapline {
  animation-delay: 2s;
  line-height: 30px;
  color: #fff;
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 1rem;
}

/* Store links beneath the home-page hero actions. These use the bundled brand
   icon font, so they remain sharp without adding remote image dependencies. */
.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  margin-left:5px;
}

.slider-area .carousel-inner .carousel-item .carousel-captions .content .store-link {
  align-items: center;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  gap: 10px;
  min-height: 52px;
  padding: 6px 14px;
  text-align: left;
  width: 174px;
}

.slider-area .carousel-inner .carousel-item .carousel-captions .content .store-link:hover,
.slider-area .carousel-inner .carousel-item .carousel-captions .content .store-link:focus-visible {
  background: #222;
  color: #fff;
  transform: translateY(-1px);
}

.store-link i {
  flex: 0 0 29px;
  font-size: 29px;
  text-align: center;
}

.store-link span {
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.store-link span small {
  display: block;
  font-size: 9px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

@media screen and (min-width: 320px) and (max-width: 575px) {
  .slider-area .carousel-inner .carousel-item .carousel-captions .content h1.heroStrapline {
    font-size: 14px;
    line-height: 20px;
    margin: -10px 0;
  }

  .store-links {
    justify-content: center;
    margin-top: 25px;
  }

  .slider-area .carousel-inner .carousel-item .carousel-captions .content .store-link {
    width: 168px;
  }
}