/* Photo controls on a girl's page.  Added 2026-08-27.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * A visitor opening a girl's page saw ONE photo and no way to know she had
 * more. The page always had a next and a previous arrow, but nothing was ever
 * drawn on screen, for two separate reasons:
 *
 *   1. Font Awesome did not work on this website. The arrows were
 *      <i class="fa fa-caret-right"></i>, and css/font-awesome.min.css had
 *      its font addresses broken (they pointed at ../index.html), so every
 *      "fa" icon on the site drew an empty box. Font Awesome was taken off
 *      the whole site on 2026-08-27 and every icon is a plain SVG now.
 *   2. css/owl.theme.css is the OLD owl version. It styles ".owl-page", but
 *      the slider on this site makes ".owl-dot". So the dots had no size,
 *      no colour and no shape.
 *
 * Everything below is plain CSS with inline SVG arrows, so it cannot break
 * the same way again. Colours follow the site: gold #ffdba1 on dark.
 */

/* the box that holds the big photo, so the arrows can sit on top of it */
.pb-gal {
  position: relative;
}

.pb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 219, 161, .7);
  z-index: 6;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}

.pb-arrow:hover,
.pb-arrow:focus {
  background: rgba(0, 0, 0, .85);
  text-decoration: none;
}

.pb-arrow svg {
  width: 20px;
  height: 20px;
  fill: #ffdba1;
  display: block;
}

.pb-arrow-prev { left: 8px; }
.pb-arrow-next { right: 8px; }

/* "2 / 5" in the corner, so the count is obvious at a glance.
   It sits at the TOP right, not the bottom: the slider makes its box as tall
   as the tallest photo, so on a girl whose photos are different heights the
   bottom of the box falls below the picture, but the top never does. */
.pb-count {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 6;
  background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 219, 161, .5);
  border-radius: 20px;
  color: #ffdba1;
  font-size: 12px;
  line-height: 1;
  padding: 5px 9px;
  pointer-events: none;
}

/* the dots the old theme file never styled */
.customNavigationSlider2 .owl-dots-contain { display: inline-block; }
.customNavigationSlider2 .owl-dot { display: inline-block; cursor: pointer; }

.customNavigationSlider2 .owl-dot span {
  display: block;
  width: 9px;
  height: 9px;
  margin: 6px 4px;
  border-radius: 50%;
  background: #8a5a3b;
  opacity: .85;
  transition: background .15s ease;
}

.customNavigationSlider2 .owl-dot.active span,
.customNavigationSlider2 .owl-dot:hover span {
  background: #ffdba1;
  opacity: 1;
}

/* small pictures under the slider — the same files the slider already
   loaded, so they cost no extra download */
/* width:fit-content with margin auto centres the row under the photo when it
   fits, and lets it start at the left and scroll when there are too many to
   fit. Plain "justify-content:center" would put the first pictures off the
   left edge where they cannot be reached. */
.pb-thumbs {
  display: flex;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin: 8px auto 4px;
  padding-bottom: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pb-thumbs::-webkit-scrollbar { height: 4px; }
.pb-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 219, 161, .4);
  border-radius: 4px;
}

.pb-thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  line-height: 0;
  opacity: .75;
  transition: opacity .15s ease, border-color .15s ease;
}

.pb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pb-thumb:hover { opacity: 1; }

.pb-thumb.is-on {
  border-color: #ffdba1;
  opacity: 1;
}

.pb-thumb:focus {
  outline: 2px solid #f4a26b;
  outline-offset: 1px;
}

@media (max-width: 575px) {
  .pb-arrow { width: 36px; height: 36px; }
  .pb-arrow svg { width: 17px; height: 17px; }
  .pb-thumb { width: 48px; height: 62px; }
}