/**
* Theme Name: PuppyPress
* Theme URI: https://puppypress.org/
* Description: PuppyPress "A WebSuite for Breeders"
* Author: BreederServe
* Author URI: https://breederserve.com
* Version: 1.10.3
* License: Private
* Primary Branch: master
*/
/* Bootstrap now loads as its own enqueued stylesheet (the purged slim build
   at assets/vendor/bootstrap/bootstrap-slim.min.css — a dependency of this
   sheet in various_tweaks.php). The old @import here serialized a 232 KB
   render-blocking fetch. bootstrap-icons likewise enqueued separately. */
/* ---- Puppy card styles (inlined from templates/puppy/parts/cards.css:
   the unversioned @import was cached indefinitely by the CDN and
   serialized a render-blocking fetch — same problem as the old
   bootstrap import). Variables --male/--female come from ACF options
   via layout/headscripts.twig. ---- */
/* Puppy Card Styles */
/* Note: Variables are set in layout/headscripts.twig from ACF options */

.text-Male {
  color: var(--male);
}

.text-Female {
  color: var(--female);
}

/* Dark mode: sites pick their male/female brand colors for LIGHT backgrounds
   (e.g. navy/maroon) — used as text on dark cards they turn unreadable.
   Keep the hue but lift the luminance. The plain color is the fallback for
   old browsers; color-mix wins where supported. */
[data-bs-theme="dark"] .text-Male,
[data-bs-theme="dark"] .text-Female {
  color: #c9cfda;
}
[data-bs-theme="dark"] .text-Male {
  color: color-mix(in srgb, var(--male) 45%, #dfe3ea 55%);
}
[data-bs-theme="dark"] .text-Female {
  color: color-mix(in srgb, var(--female) 45%, #dfe3ea 55%);
}

.bg-Male {
  background-color: var(--male);
}

.bg-Female {
  background-color: var(--female);
}

/* Gender buttons: drive Bootstrap's own button variables so hover/focus/
   active states keep their color instead of washing out to transparent.
   (Bootstrap's .btn:hover sets background to --bs-btn-hover-bg, which these
   classes previously never defined — so hovering emptied the background.) */
.btn-Male {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--male);
  --bs-btn-border-color: var(--male);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--male);
  --bs-btn-hover-border-color: var(--male);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--male);
  --bs-btn-active-border-color: var(--male);
  --bs-btn-disabled-bg: var(--male);
  --bs-btn-disabled-border-color: var(--male);
  background-color: var(--male);
}

.btn-Female {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--female);
  --bs-btn-border-color: var(--female);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--female);
  --bs-btn-hover-border-color: var(--female);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--female);
  --bs-btn-active-border-color: var(--female);
  --bs-btn-disabled-bg: var(--female);
  --bs-btn-disabled-border-color: var(--female);
  background-color: var(--female);
}
/* ---- Puppy card photo carousel: small, tidy chevrons ---- */
.pp-card-carousel .card-img-top { object-fit: cover; }

/* Reset Bootstrap's full-height gradient controls to compact circular buttons */
.pp-card-chevron {
  width: auto;
  opacity: 0;                     /* revealed on hover (desktop) */
  transition: opacity .18s ease;
}
.pp-card-carousel:hover .pp-card-chevron { opacity: 1; }
.pp-card-chevron.carousel-control-prev { justify-content: flex-start; padding-left: .4rem; }
.pp-card-chevron.carousel-control-next { justify-content: flex-end; padding-right: .4rem; }
.pp-chevron-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .8rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.pp-chevron-btn:hover { background: rgba(0, 0, 0, .65); }
/* Touch devices have no hover — keep the chevrons gently visible */
@media (hover: none) {
  .pp-card-chevron { opacity: .8; }
}

/* ---- Card call-to-action button: pop it off the card ---- */
.pp-cta {
  box-shadow: 0 4px 10px rgba(0, 0, 0, .22) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pp-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .30) !important;
}


@media (max-width: 1024px) {
    .grecaptcha-badge {
        opacity: 0;
        visibility: hidden;
        display: none !important;
    }
}

.grecaptcha-badge {
    display: none !important;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* Hide LiteSpeed Cache success notices */
.litespeed_icon.notice.notice-success {
    display: none !important;
}

body{
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
}

main{
    flex: 1 !important;
}

#wpwrap{
    min-height: initial !important;
}

#wpcontent{
    flex: 1 !important;
}

/* Layout utilities — extracted from inline styles in base.twig so the
   spacing/background live in the stylesheet instead of scattered markup. */
.pp-breadcrumb-wrap { margin-bottom: -20px; }

.pp-content-panel {
    z-index: 0;
    background: repeating-linear-gradient(45deg, #efeff0, #efeff0 1px, #f2f2fb 1px, #f2f2fb 7px);
}

.pp-footer { margin-top: -15px; }

/* ---- Glass status labels ----
   Restyle the bright status badges (Available / Reserved / On-Hold / etc.)
   into one consistent translucent "glass" pill that reads cleanly over any
   photo, light or dark. The colored status dot is a ::before whose color is
   derived from the badge's existing bg-* utility class, so no template markup
   had to change. Targets .badge.text-small.p-2 (status labels) only — the
   icon-only video badges use .m-2 and are left alone. */
.badge.text-small.p-2 {
    display: inline-flex !important;
    align-items: center;
    gap: .45em;
    padding: .42em .8em !important;
    border-radius: 50rem !important;
    background: rgba(22, 22, 28, .55) !important;
    color: #fff !important;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.badge.text-small.p-2::before {
    content: "";
    flex: 0 0 auto;
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: #cfd3d8;
}
.badge.text-small.p-2 i { display: none; } /* dot replaces the old inline icons */
/* Consistent breathing room from the photo's top-left corner (overrides the
   varying m-2 / mt-2 / ms-3 utilities the badges carry). */
.badge.text-small.p-2 { margin: .75rem !important; }
/* Bigger on the large hero photos (single puppy / litter) so they don't look
   undersized; card thumbnails keep the smaller default size. */
#puppy-hero .badge.text-small.p-2,
#litter-hero .badge.text-small.p-2 {
    font-size: .95rem;
    margin: 1rem !important;
}
.badge.text-small.p-2.bg-success::before   { background: #2fbe63; }
.badge.text-small.p-2.bg-primary::before   { background: #4f9bff; }
.badge.text-small.p-2.bg-danger::before    { background: #ff5c5c; }
.badge.text-small.p-2.bg-info::before      { background: #3fd0d6; }
.badge.text-small.p-2.bg-warning::before   { background: #ffbe3d; }
.badge.text-small.p-2.bg-dark::before,
.badge.text-small.p-2.bg-secondary::before { background: #aeb4bd; }

.postbox-container .postbox[id*="acf-group_66b27d5be3869"] {
    float: right !important;
    width: 280px !important;
    clear: right !important;
}
/* ---- Light/dark mode toggle: pill switch (power-icon knob + sun/moon),
   lives in the footer for now. ---- */
.pp-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    width: 66px;
    height: 32px;
    padding: 3px;
    border: 2px solid #1c1c22;
    border-radius: 50rem;
    background: #f2f2f4;
    cursor: pointer;
    line-height: 0;
    transition: background .2s ease, border-color .2s ease;
}
.pp-theme-toggle .pp-toggle-knob {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #1c1c22;
    color: #1c1c22;
    font-size: .8rem;
    flex: 0 0 auto;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.pp-theme-toggle .pp-toggle-mode {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1c1c22;
    font-size: .95rem;
}
.pp-theme-toggle .pp-icon-sun  { display: inline; }
.pp-theme-toggle .pp-icon-moon { display: none; }
.pp-theme-toggle:hover { border-color: #000; }

/* Dark state */
[data-bs-theme="dark"] .pp-theme-toggle {
    background: #1c1c22;
    border-color: #f2f2f4;
}
[data-bs-theme="dark"] .pp-theme-toggle .pp-toggle-knob {
    background: #f2f2f4;
    color: #1c1c22;
    border-color: #f2f2f4;
}
[data-bs-theme="dark"] .pp-theme-toggle .pp-toggle-mode { color: #ffd85e; }
[data-bs-theme="dark"] .pp-theme-toggle .pp-icon-sun  { display: none; }
[data-bs-theme="dark"] .pp-theme-toggle .pp-icon-moon { display: inline; }

/* ---- Dark mode: surfaces Bootstrap doesn't adapt on its own ----
   Bootstrap 5.3 flips its own components + subtle brand colors when
   data-bs-theme=dark; these override the theme's inline/custom surfaces. */
[data-bs-theme="dark"] body {
    background: #14151a !important;
    background-image: none !important;
}
[data-bs-theme="dark"] .pp-content-panel {
    background: repeating-linear-gradient(45deg, #1d1e24, #1d1e24 1px, #24252d 1px, #24252d 7px) !important;
}
/* Remap Bootstrap's FIXED light/dark utilities to theme-adaptive tokens in
   dark mode — otherwise .bg-light panels stay white and .text-dark/.link-dark
   text goes invisible on dark. Catches every occurrence site-wide at once. */
[data-bs-theme="dark"] .bg-light { background-color: #1d1e24 !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--bs-body-bg) !important; }
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .link-dark { color: var(--bs-body-color) !important; }
/* Table/list surfaces that hardcode light */
[data-bs-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--bs-secondary-color); }

/* ---- Modernized deluxe header ---- */
.puppy-press-header {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}
/* Nav: cleaner spacing, subtle hover indicator, refined dropdown caret */
.puppy-press-header .navbar-nav .nav-link {
    padding: .35rem .9rem;
    position: relative;
    transition: opacity .15s ease;
}
.puppy-press-header .navbar-nav .nav-link:hover { opacity: .75; }
/* underline-on-hover accent */
.puppy-press-header .navbar-nav > .nav-item > .nav-link::after {
    content: none;
}
.puppy-press-header .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    content: "";
    display: inline-block;
    margin-left: .4em;
    vertical-align: .1em;
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-left: .3em solid transparent;
    opacity: .55;
}
.puppy-press-header .navbar-nav > .nav-item > .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.puppy-press-header .navbar-nav > .nav-item:hover > .nav-link,
.puppy-press-header .navbar-nav > .nav-item.show > .nav-link {
    border-bottom-color: currentColor;
    opacity: 1;
}
/* Softer, floating dropdown menus */
.puppy-press-header .dropdown-menu {
    border: 0;
    border-radius: .6rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    padding: .4rem;
    margin-top: .5rem;
}
.puppy-press-header .dropdown-item { border-radius: .4rem; padding: .5rem .8rem; }

/* Tighter, tucked-into-the-corner status labels on the small thumbnails
   (sibling sections + litter cards) — the default .75rem is too much here. */
#puppy-siblings .badge.text-small.p-2,
#litter-siblings .badge.text-small.p-2,
.pp-litter-card .badge.text-small.p-2 {
    margin: .35rem !important;
    font-size: .68rem;
}

/* ---- Buttons for the *-subtle theme colors ----
   Sites can set theme.color to a Bootstrap subtle token (e.g. danger-subtle),
   but Bootstrap ships no btn-*-subtle classes — so btn-danger-subtle rendered
   as a chrome-less invisible button (contact submit, payment buttons). Define
   them from Bootstrap's subtle/emphasis tokens; the vars flip automatically
   in dark mode. Hover uses the border-subtle tone (one step deeper). */
.btn-primary-subtle {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-bg: var(--bs-primary-bg-subtle);
    --bs-btn-border-color: var(--bs-primary-border-subtle);
    --bs-btn-hover-color: var(--bs-primary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-primary-border-subtle);
    --bs-btn-hover-border-color: var(--bs-primary-border-subtle);
    --bs-btn-active-color: var(--bs-primary-text-emphasis);
    --bs-btn-active-bg: var(--bs-primary-border-subtle);
    --bs-btn-active-border-color: var(--bs-primary-border-subtle);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-primary-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-primary-border-subtle);
}
.btn-secondary-subtle {
    --bs-btn-color: var(--bs-secondary-text-emphasis);
    --bs-btn-bg: var(--bs-secondary-bg-subtle);
    --bs-btn-border-color: var(--bs-secondary-border-subtle);
    --bs-btn-hover-color: var(--bs-secondary-text-emphasis);
    --bs-btn-hover-bg: var(--bs-secondary-border-subtle);
    --bs-btn-hover-border-color: var(--bs-secondary-border-subtle);
    --bs-btn-active-color: var(--bs-secondary-text-emphasis);
    --bs-btn-active-bg: var(--bs-secondary-border-subtle);
    --bs-btn-active-border-color: var(--bs-secondary-border-subtle);
    --bs-btn-disabled-color: var(--bs-secondary-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-secondary-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-secondary-border-subtle);
}
.btn-success-subtle {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-bg: var(--bs-success-bg-subtle);
    --bs-btn-border-color: var(--bs-success-border-subtle);
    --bs-btn-hover-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-bg: var(--bs-success-border-subtle);
    --bs-btn-hover-border-color: var(--bs-success-border-subtle);
    --bs-btn-active-color: var(--bs-success-text-emphasis);
    --bs-btn-active-bg: var(--bs-success-border-subtle);
    --bs-btn-active-border-color: var(--bs-success-border-subtle);
    --bs-btn-disabled-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-success-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-success-border-subtle);
}
.btn-danger-subtle {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-bg: var(--bs-danger-bg-subtle);
    --bs-btn-border-color: var(--bs-danger-border-subtle);
    --bs-btn-hover-color: var(--bs-danger-text-emphasis);
    --bs-btn-hover-bg: var(--bs-danger-border-subtle);
    --bs-btn-hover-border-color: var(--bs-danger-border-subtle);
    --bs-btn-active-color: var(--bs-danger-text-emphasis);
    --bs-btn-active-bg: var(--bs-danger-border-subtle);
    --bs-btn-active-border-color: var(--bs-danger-border-subtle);
    --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-danger-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-danger-border-subtle);
}
.btn-warning-subtle {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-bg: var(--bs-warning-bg-subtle);
    --bs-btn-border-color: var(--bs-warning-border-subtle);
    --bs-btn-hover-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: var(--bs-warning-border-subtle);
    --bs-btn-hover-border-color: var(--bs-warning-border-subtle);
    --bs-btn-active-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-bg: var(--bs-warning-border-subtle);
    --bs-btn-active-border-color: var(--bs-warning-border-subtle);
    --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-warning-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-warning-border-subtle);
}
.btn-info-subtle {
    --bs-btn-color: var(--bs-info-text-emphasis);
    --bs-btn-bg: var(--bs-info-bg-subtle);
    --bs-btn-border-color: var(--bs-info-border-subtle);
    --bs-btn-hover-color: var(--bs-info-text-emphasis);
    --bs-btn-hover-bg: var(--bs-info-border-subtle);
    --bs-btn-hover-border-color: var(--bs-info-border-subtle);
    --bs-btn-active-color: var(--bs-info-text-emphasis);
    --bs-btn-active-bg: var(--bs-info-border-subtle);
    --bs-btn-active-border-color: var(--bs-info-border-subtle);
    --bs-btn-disabled-color: var(--bs-info-text-emphasis);
    --bs-btn-disabled-bg: var(--bs-info-bg-subtle);
    --bs-btn-disabled-border-color: var(--bs-info-border-subtle);
}

/* ---- Secure-payment button: yellow with green writing (owner's spec) ---- */
.pp-secure-btn {
    --bs-btn-color: #157347;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #0f5132;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-active-color: #0f5132;
    --bs-btn-active-bg: #e6ae06;
    --bs-btn-active-border-color: #e6ae06;
    --bs-btn-disabled-color: #157347;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
    font-weight: 600;
}

/* Queue date: hover reveals the exact deposit time (native tooltip) */
.pp-queue-time {
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

/* How-It-Works step icons: calm teal, not the alarm-red brand tone */
.pp-step-icon { color: #2a9d8f; }

/* Clickable queue rows (logged-in team only — rows link to the customer record) */
.pp-row-link { cursor: pointer; }
.pp-row-link:hover td { background-color: rgba(42, 157, 143, .12); }

/* ================================================================
   Refinement layer (2026-07) — modern, less-blocky Bootstrap
   Token-level polish applied fleet-wide. Everything rides Bootstrap
   CSS variables, so it respects each site's theme.color and flips
   cleanly with [data-bs-theme] light/dark.
   ================================================================ */

/* Softer global geometry + diffuse modern shadows (5.3 utilities like
   .shadow/.rounded read these vars, so the whole site retunes at once) */
:root {
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .4rem;
    --bs-border-radius-lg: .75rem;
    --bs-border-radius-xl: 1rem;
    --bs-box-shadow: 0 8px 24px rgba(15, 18, 25, .10);
    --bs-box-shadow-sm: 0 2px 10px rgba(15, 18, 25, .07);
    --bs-box-shadow-lg: 0 18px 48px rgba(15, 18, 25, .16);
}
[data-bs-theme="dark"] {
    --bs-box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    --bs-box-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --bs-box-shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}

/* Buttons: refined, not slab-like — rounder, medium weight, gentle motion */
.btn {
    --bs-btn-border-radius: .55rem;
    --bs-btn-font-weight: 500;
    letter-spacing: .01em;
    transition: color .15s ease, background-color .15s ease,
                border-color .15s ease, box-shadow .15s ease,
                transform .15s ease;
}
.btn-lg { --bs-btn-border-radius: .7rem; }
.btn-sm { --bs-btn-border-radius: .45rem; }
.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 18, 25, .16);
}
[data-bs-theme="dark"] .btn:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; }
/* Links styled as buttons shouldn't lift twice inside nav bars */
.navbar .btn:hover, .carousel-control-prev:hover, .carousel-control-next:hover {
    transform: none;
}

/* Calmer focus ring (still obvious for keyboard users, less alarm-glow) */
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .18);
}

/* Cards / alerts / modals: rounder with softer edges */
.card {
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
}
.alert { --bs-alert-border-radius: .65rem; }
.modal { --bs-modal-border-radius: .9rem; }
.toast { border-radius: .65rem; }

/* Forms: matching geometry, gentle focus */
.form-control, .form-select, .input-group-text {
    border-radius: .55rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-floating > .form-control, .form-floating > .form-select {
    border-radius: .55rem;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .btn, .form-control, .form-select { transition: none; }
    .btn:hover { transform: none; }
}

/* ---- Shared busy-button state (house rule: waiting buttons ALWAYS spin).
   Add .pp-btn-busy to any button while its request runs; remove after. ---- */
.pp-btn-busy {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.pp-btn-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: pp-btn-spin .7s linear infinite;
}
.btn-light.pp-btn-busy::after, .btn-outline-secondary.pp-btn-busy::after {
    border-color: rgba(0, 0, 0, .25);
    border-top-color: rgba(0, 0, 0, .7);
}
@keyframes pp-btn-spin { to { transform: rotate(360deg); } }