/**
 * PetMatchPro Search Styles
 * Clean CSS written from scratch - No !important
 * 
 * Template Structure:
 * - Adopt Search Default
 * - Universal Search Default
 * - Similar Animals Section
 * 
 * @package PetMatchPro
 * @version 7.0.0
 */

/* ============================================================================
   SEARCH FORM STYLES
   ========================================================================== */

/* Form container */
.pmp-search-form {
    margin-bottom: 2rem;
    width: 100%;
    max-width: 650px;
}

/* Form filters - stack vertically */
.pmp-search-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Filter wrapper - 2 FIXED columns (label | field) */
.pmp-search-filter-wrapper {
    display: grid;
    grid-template-columns: 200px 400px;
    gap: 1rem;
    align-items: center;
}

/* Buttons at bottom - aligned with value fields */
.pmp-search-form-buttons-wrapper {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    margin-left: calc(200px + 1rem); /* Label width + gap = align with fields */
}

/* Filter labels */
.pmp-search-filter-label {
    font-weight: 600;
    color: var(--pmp-color-body, #333);
    text-align: right;
}

/* Filter fields (inputs, selects) */
.pmp-search-filter-field {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

.pmp-search-filter-field:focus {
    outline: none;
    border-color: var(--pmp-color-cta, #F38D81);
    box-shadow: 0 0 0 2px rgba(243, 141, 129, 0.2);
}

/* Submit button */
.pmp-search-submit-button {
    padding: 0.75rem 1.5rem;
    background-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
    border: 1px solid var(--pmp-color-cta, #F38D81);
    border-radius: 4px;
    font-size: var(--pmp-font-size-search-button, 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.pmp-search-submit-button:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
}

/* Feature button */
.pmp-search-feature-button {
    padding: 0.75rem 1.5rem;
    background-color: var(--pmp-color-primary, #024463);
    color: #FFFFFF;
    border: 1px solid var(--pmp-color-primary, #024463);
    border-radius: 4px;
    font-size: var(--pmp-font-size-search-button, 1rem);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.pmp-search-feature-button:hover {
    background-color: var(--pmp-color-cta, #F38D81);
    border-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
}

/* ============================================================================
   TEMPLATE-SPECIFIC OVERRIDES - UNIVERSAL WIDGET (Filter Widget)
   Coral rounded style with 2-column horizontal grid layout
   ========================================================================== */

/* Widget form container - coral background, rounded */
.pmp-search-universal-widget .pmp-search-form,
.pmp-search-universal-widget form,
.pmp-search-universal-widget #pmp-search-widget {
    width: 100%;
    max-width: none;
    align-items: flex-end;
    background-color: var(--pmp-color-widget, #F26959);
    padding: 50px;
    border-radius: 50px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
}

/* Clear filters container spans both columns */
.pmp-search-universal-widget .pmp-search-widget-clear-container {
    grid-column: 1 / span 2;
}

.pmp-search-universal-widget .pmp-search-widget-clear {
    float: left;
    background: url(../../includes/images/icon-clear.svg) no-repeat 0 50%;
    padding-left: 35px;
    display: inline-block;
    font: 400 18px / 22px CenturyGothic, sans-serif;
    color: #D6D5D6;
    transition: 0.4s;
    text-decoration: none;
}

.pmp-search-universal-widget .pmp-search-widget-clear:hover {
    color: #FFFFFF;
    cursor: pointer;
}

/* Filter wrapper - stack label above field */
.pmp-search-universal-widget .pmp-search-filter-wrapper {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    gap: 0.5em;
}

/* Labels - white, bold */
.pmp-search-universal-widget .pmp-search-filter-label {
    display: block;
    clear: both;
    color: #FFFFFF;
    font-size: 25px;
    line-height: 30px;
    font-weight: 700;
    padding-bottom: 0.5em;
    text-align: left;
}

/* Select dropdowns - pill shaped, transparent with white border */
.pmp-search-universal-widget .pmp-search-filter-field {
    width: 95%;
    height: 80px;
    border-radius: 50px;
    background-color: var(--pmp-color-widget, #F26959);
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 400;
    outline: 0;
    padding: 0 20px;
}

.pmp-search-universal-widget .pmp-search-filter-field option {
    background-color: #FFFFFF;
    color: var(--pmp-color-widget, #F26959);
}

.pmp-search-universal-widget .pmp-search-filter-field:focus {
    border-color: #FFFFFF;
    box-shadow: none;
}

/* Buttons wrapper */
.pmp-search-universal-widget .pmp-search-form-buttons-wrapper,
.pmp-search-universal-widget form .pmp-search-form-buttons-wrapper {
    margin-top: 0;
    grid-column: 1 / span 2;
    display: flex;
    justify-content: center;
}

/* Submit button - white pill with coral text */
.pmp-search-universal-widget .pmp-search-submit-button {
    width: 95%;
    max-width: 300px;
    height: 80px;
    border-radius: 50px;
    border: 1px solid #FFFFFF;
    color: var(--pmp-color-widget, #F26959);
    font-size: 16px;
    font-weight: 400;
    padding: 10px 90px;
    background: #FFFFFF url(../../includes/images/icon-arrow-1-border.png) no-repeat 95.2% 50% / 60px 60px;
    cursor: pointer;
    font: 700 20px / 26px CenturyGothic, sans-serif;
    text-transform: uppercase;
}

.pmp-search-universal-widget .pmp-search-submit-button:hover {
    background: var(--pmp-color-widget, #F26959) url(../../includes/images/icon-arrow-1-border-reverse.png) no-repeat 95.2% 50% / 60px 60px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

/* Responsive - single column on mobile */
@media (max-width: 768px) {
    .pmp-search-universal-widget .pmp-search-form,
    .pmp-search-universal-widget form,
    .pmp-search-universal-widget #pmp-search-widget {
        grid-template-columns: 1fr;
        padding: 30px;
        border-radius: 30px;
    }
    
    .pmp-search-universal-widget .pmp-search-widget-clear-container,
    .pmp-search-universal-widget .pmp-search-form-buttons-wrapper {
        grid-column: 1;
    }
    
    .pmp-search-universal-widget .pmp-search-filter-label {
        font-size: 20px;
        line-height: 24px;
    }
    
    .pmp-search-universal-widget .pmp-search-filter-field,
    .pmp-search-universal-widget .pmp-search-submit-button {
        height: 60px;
    }
}

/* ============================================================================
   SEARCH RESULTS PAGE STRUCTURE
   ========================================================================== */

/* Page title */
.pmp-search-title {
    font-size: var(--pmp-font-size-search-title, 2rem);
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 1rem;
}

/* Page subtitle */
.pmp-search-subtitle {
    font-size: var(--pmp-font-size-search-subtitle, 1.25rem);
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 10px;
    line-height: 1em;
}

.pmp-search-profile-count {
    text-align: left;
    margin-bottom: 25px;
    margin-top: 0 !important;
    color: var(--pmp-color-heading, #282828);
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Results container wrapper */
.pmp-search-results-container,
div.pmp-search-results-container {
    width: 100%;
    max-width: none;
    margin-top: 1.5rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================================
   GRID LAYOUTS
   ========================================================================== */

/* Base grid - CSS Grid layout */
.pmp-search-results,
div.pmp-search-results {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

/* Grid columns - responsive */
.pmp-search-results.grid-1 {
    grid-template-columns: 1fr;
}

.pmp-search-results.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pmp-search-results.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pmp-search-results.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pmp-search-results.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* ============================================================================
   ANIMAL CARD STYLES
   ========================================================================== */

/* Card container */
.pmp-search-result-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.pmp-search-result-container a {
    cursor: pointer;
}

.pmp-search-result-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Banner (Featured/Special status) */
.pmp-search-result-banner {
    background-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
    text-align: center;
    padding: 0.5rem;
    font-weight: bold;
    font-size: var(--pmp-font-size-search-banner, 0.9rem);
}

/* Photo section */
.pmp-search-result-photo,
.pmp-search-result-photo-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.pmp-search-result-photo-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.pmp-search-result-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top;
    display: block;
}

.pmp-search-result-image-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0e0;
    color: #999;
}

/* Special Needs Overlay - Search Cards */
.pmp-search-special-needs-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: auto;
    z-index: 10;
}

/* ============================================================================
   OVERLAY POSITION SYSTEM
   Position map (clockwise from top-left):
   1 --- 2 --- 3
   |           |
   8           4
   |           |
   7 --- 6 --- 5
   
   Flow directions:
   1: top-left, flow right       5: bottom-right, flow left
   2: top-center, centered       6: bottom-center, centered
   3: top-right, flow left       7: bottom-left, flow right
   4: middle-right, vertical     8: middle-left, vertical
   ============================================================================ */

/* Base overlay icon styles */
.pmp-overlay {
    width: var(--pmp-size-search-overlay-icon, 40px);
    height: var(--pmp-size-search-overlay-icon, 40px);
    flex-shrink: 0;
}

/* Overlay container - positioned with flexbox for icon flow */
.pmp-overlay-container {
    position: absolute;
    display: flex;
    gap: 5px;
    z-index: 10;
}

/* Position 1: Top Left - stack down */
.pmp-overlay-pos-1 {
    top: 10px;
    left: 10px;
    flex-direction: column;
}

/* Position 2: Top Center - centered horizontally */
.pmp-overlay-pos-2 {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

/* Position 3: Top Right - stack down */
.pmp-overlay-pos-3 {
    top: 10px;
    right: 10px;
    flex-direction: column;
}

/* Position 4: Middle Right - centered vertically */
.pmp-overlay-pos-4 {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    flex-direction: column;
}

/* Position 5: Bottom Right - stack up */
.pmp-overlay-pos-5 {
    bottom: 10px;
    right: 10px;
    flex-direction: column-reverse;
}

/* Position 6: Bottom Center - centered horizontally */
.pmp-overlay-pos-6 {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
}

/* Position 7: Bottom Left - stack up */
.pmp-overlay-pos-7 {
    bottom: 10px;
    left: 10px;
    flex-direction: column-reverse;
}

/* Position 8: Middle Left - centered vertically */
.pmp-overlay-pos-8 {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    flex-direction: column;
}

/* Detail Template Overlay Overrides - larger icons for detail pages */
.pmp-details-image-main .pmp-overlay,
.pmp-detail-profile-image .pmp-overlay {
    width: var(--pmp-size-detail-overlay-icon, 50px);
    max-width: var(--pmp-size-detail-overlay-icon, 50px);
    height: var(--pmp-size-detail-overlay-icon, 50px);
}

/* ============================================================================
   SVG ICON SYSTEM (mask-image)
   Icons rendered as masked spans - color controlled via background-color.
   Path: relative from public/css/ to includes/images/
   ========================================================================== */

/* Base SVG icon - shared mask properties */
.pmp-svg-icon {
    display: inline-block;
    background-color: #000000;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}
.pmp-svg-icon-address { mask-image: url(../../includes/images/icon-address.svg); -webkit-mask-image: url(../../includes/images/icon-address.svg); }
.pmp-svg-icon-adopt-profile-url { mask-image: url(../../includes/images/icon-adopt-profile-url.svg); -webkit-mask-image: url(../../includes/images/icon-adopt-profile-url.svg); }
.pmp-svg-icon-adoption-fee { mask-image: url(../../includes/images/icon-adoption-fee.svg); -webkit-mask-image: url(../../includes/images/icon-adoption-fee.svg); }
.pmp-svg-icon-adoption-pending { mask-image: url(../../includes/images/icon-adoption-pending.svg); -webkit-mask-image: url(../../includes/images/icon-adoption-pending.svg); }
.pmp-svg-icon-adult-cat { mask-image: url(../../includes/images/icon-adult-cat.svg); -webkit-mask-image: url(../../includes/images/icon-adult-cat.svg); }
.pmp-svg-icon-adult-dog { mask-image: url(../../includes/images/icon-adult-dog.svg); -webkit-mask-image: url(../../includes/images/icon-adult-dog.svg); }
.pmp-svg-icon-adult { mask-image: url(../../includes/images/icon-adult.svg); -webkit-mask-image: url(../../includes/images/icon-adult.svg); }
.pmp-svg-icon-age-2 { mask-image: url(../../includes/images/icon-age-2.svg); -webkit-mask-image: url(../../includes/images/icon-age-2.svg); }
.pmp-svg-icon-age { mask-image: url(../../includes/images/icon-age.svg); -webkit-mask-image: url(../../includes/images/icon-age.svg); }
.pmp-svg-icon-altered { mask-image: url(../../includes/images/icon-altered.svg); -webkit-mask-image: url(../../includes/images/icon-altered.svg); }
.pmp-svg-icon-available { mask-image: url(../../includes/images/icon-available.svg); -webkit-mask-image: url(../../includes/images/icon-available.svg); }
.pmp-svg-icon-baby { mask-image: url(../../includes/images/icon-baby.svg); -webkit-mask-image: url(../../includes/images/icon-baby.svg); }
.pmp-svg-icon-bat { mask-image: url(../../includes/images/icon-bat.svg); -webkit-mask-image: url(../../includes/images/icon-bat.svg); }
.pmp-svg-icon-bear { mask-image: url(../../includes/images/icon-bear.svg); -webkit-mask-image: url(../../includes/images/icon-bear.svg); }
.pmp-svg-icon-birthday { mask-image: url(../../includes/images/icon-birthday.svg); -webkit-mask-image: url(../../includes/images/icon-birthday.svg); }
.pmp-svg-icon-breed { mask-image: url(../../includes/images/icon-breed.svg); -webkit-mask-image: url(../../includes/images/icon-breed.svg); }
.pmp-svg-icon-building { mask-image: url(../../includes/images/icon-building.svg); -webkit-mask-image: url(../../includes/images/icon-building.svg); }
.pmp-svg-icon-cat { mask-image: url(../../includes/images/icon-cat.svg); -webkit-mask-image: url(../../includes/images/icon-cat.svg); }
.pmp-svg-icon-check { mask-image: url(../../includes/images/icon-check.svg); -webkit-mask-image: url(../../includes/images/icon-check.svg); }
.pmp-svg-icon-city { mask-image: url(../../includes/images/icon-city.svg); -webkit-mask-image: url(../../includes/images/icon-city.svg); }
.pmp-svg-icon-clear { mask-image: url(../../includes/images/icon-clear.svg); -webkit-mask-image: url(../../includes/images/icon-clear.svg); }
.pmp-svg-icon-country { mask-image: url(../../includes/images/icon-country.svg); -webkit-mask-image: url(../../includes/images/icon-country.svg); }
.pmp-svg-icon-cow { mask-image: url(../../includes/images/icon-cow.svg); -webkit-mask-image: url(../../includes/images/icon-cow.svg); }
.pmp-svg-icon-declaw { mask-image: url(../../includes/images/icon-declaw.svg); -webkit-mask-image: url(../../includes/images/icon-declaw.svg); }
.pmp-svg-icon-declawed { mask-image: url(../../includes/images/icon-declawed.svg); -webkit-mask-image: url(../../includes/images/icon-declawed.svg); }
.pmp-svg-icon-deer { mask-image: url(../../includes/images/icon-deer.svg); -webkit-mask-image: url(../../includes/images/icon-deer.svg); }
.pmp-svg-icon-description { mask-image: url(../../includes/images/icon-description.svg); -webkit-mask-image: url(../../includes/images/icon-description.svg); }
.pmp-svg-icon-display-age-2 { mask-image: url(../../includes/images/icon-display-age-2.svg); -webkit-mask-image: url(../../includes/images/icon-display-age-2.svg); }
.pmp-svg-icon-display-age { mask-image: url(../../includes/images/icon-display-age.svg); -webkit-mask-image: url(../../includes/images/icon-display-age.svg); }
.pmp-svg-icon-dog { mask-image: url(../../includes/images/icon-dog.svg); -webkit-mask-image: url(../../includes/images/icon-dog.svg); }
.pmp-svg-icon-donkey { mask-image: url(../../includes/images/icon-donkey.svg); -webkit-mask-image: url(../../includes/images/icon-donkey.svg); }
.pmp-svg-icon-dove { mask-image: url(../../includes/images/icon-dove.svg); -webkit-mask-image: url(../../includes/images/icon-dove.svg); }
.pmp-svg-icon-duck { mask-image: url(../../includes/images/icon-duck.svg); -webkit-mask-image: url(../../includes/images/icon-duck.svg); }
.pmp-svg-icon-energy-level { mask-image: url(../../includes/images/icon-energy-level.svg); -webkit-mask-image: url(../../includes/images/icon-energy-level.svg); }
.pmp-svg-icon-error { mask-image: url(../../includes/images/icon-error.svg); -webkit-mask-image: url(../../includes/images/icon-error.svg); }
.pmp-svg-icon-est-birthday { mask-image: url(../../includes/images/icon-est-birthday.svg); -webkit-mask-image: url(../../includes/images/icon-est-birthday.svg); }
.pmp-svg-icon-featured { mask-image: url(../../includes/images/icon-featured.svg); -webkit-mask-image: url(../../includes/images/icon-featured.svg); }
.pmp-svg-icon-female { mask-image: url(../../includes/images/icon-female.svg); -webkit-mask-image: url(../../includes/images/icon-female.svg); }
.pmp-svg-icon-fence { mask-image: url(../../includes/images/icon-fence.svg); -webkit-mask-image: url(../../includes/images/icon-fence.svg); }
.pmp-svg-icon-fish { mask-image: url(../../includes/images/icon-fish.svg); -webkit-mask-image: url(../../includes/images/icon-fish.svg); }
.pmp-svg-icon-foster { mask-image: url(../../includes/images/icon-foster.svg); -webkit-mask-image: url(../../includes/images/icon-foster.svg); }
.pmp-svg-icon-found { mask-image: url(../../includes/images/icon-found.svg); -webkit-mask-image: url(../../includes/images/icon-found.svg); }
.pmp-svg-icon-frog { mask-image: url(../../includes/images/icon-frog.svg); -webkit-mask-image: url(../../includes/images/icon-frog.svg); }
.pmp-svg-icon-gender { mask-image: url(../../includes/images/icon-gender.svg); -webkit-mask-image: url(../../includes/images/icon-gender.svg); }
.pmp-svg-icon-google-formatted-address { mask-image: url(../../includes/images/icon-google-formatted-address.svg); -webkit-mask-image: url(../../includes/images/icon-google-formatted-address.svg); }
.pmp-svg-icon-google-geometry { mask-image: url(../../includes/images/icon-google-geometry.svg); -webkit-mask-image: url(../../includes/images/icon-google-geometry.svg); }
.pmp-svg-icon-google-lat { mask-image: url(../../includes/images/icon-google-lat.svg); -webkit-mask-image: url(../../includes/images/icon-google-lat.svg); }
.pmp-svg-icon-google-lng { mask-image: url(../../includes/images/icon-google-lng.svg); -webkit-mask-image: url(../../includes/images/icon-google-lng.svg); }
.pmp-svg-icon-horse { mask-image: url(../../includes/images/icon-horse.svg); -webkit-mask-image: url(../../includes/images/icon-horse.svg); }
.pmp-svg-icon-house-trained-not { mask-image: url(../../includes/images/icon-house-trained-not.svg); -webkit-mask-image: url(../../includes/images/icon-house-trained-not.svg); }
.pmp-svg-icon-house-trained { mask-image: url(../../includes/images/icon-house-trained.svg); -webkit-mask-image: url(../../includes/images/icon-house-trained.svg); }
.pmp-svg-icon-hypoallergenic { mask-image: url(../../includes/images/icon-hypoallergenic.svg); -webkit-mask-image: url(../../includes/images/icon-hypoallergenic.svg); }
.pmp-svg-icon-id { mask-image: url(../../includes/images/icon-id.svg); -webkit-mask-image: url(../../includes/images/icon-id.svg); }
.pmp-svg-icon-intake-date { mask-image: url(../../includes/images/icon-intake-date.svg); -webkit-mask-image: url(../../includes/images/icon-intake-date.svg); }
.pmp-svg-icon-intake-type { mask-image: url(../../includes/images/icon-intake-type.svg); -webkit-mask-image: url(../../includes/images/icon-intake-type.svg); }
.pmp-svg-icon-juvenile { mask-image: url(../../includes/images/icon-juvenile.svg); -webkit-mask-image: url(../../includes/images/icon-juvenile.svg); }
.pmp-svg-icon-kennel-location { mask-image: url(../../includes/images/icon-kennel-location.svg); -webkit-mask-image: url(../../includes/images/icon-kennel-location.svg); }
.pmp-svg-icon-kennel { mask-image: url(../../includes/images/icon-kennel.svg); -webkit-mask-image: url(../../includes/images/icon-kennel.svg); }
.pmp-svg-icon-kitten { mask-image: url(../../includes/images/icon-kitten.svg); -webkit-mask-image: url(../../includes/images/icon-kitten.svg); }
.pmp-svg-icon-location { mask-image: url(../../includes/images/icon-location.svg); -webkit-mask-image: url(../../includes/images/icon-location.svg); }
.pmp-svg-icon-long-address { mask-image: url(../../includes/images/icon-long-address.svg); -webkit-mask-image: url(../../includes/images/icon-long-address.svg); }
.pmp-svg-icon-los { mask-image: url(../../includes/images/icon-los.svg); -webkit-mask-image: url(../../includes/images/icon-los.svg); }
.pmp-svg-icon-lost { mask-image: url(../../includes/images/icon-lost.svg); -webkit-mask-image: url(../../includes/images/icon-lost.svg); }
.pmp-svg-icon-male { mask-image: url(../../includes/images/icon-male.svg); -webkit-mask-image: url(../../includes/images/icon-male.svg); }
.pmp-svg-icon-microchip { mask-image: url(../../includes/images/icon-microchip.svg); -webkit-mask-image: url(../../includes/images/icon-microchip.svg); }
.pmp-svg-icon-microchipped { mask-image: url(../../includes/images/icon-microchipped.svg); -webkit-mask-image: url(../../includes/images/icon-microchipped.svg); }
.pmp-svg-icon-mouse { mask-image: url(../../includes/images/icon-mouse.svg); -webkit-mask-image: url(../../includes/images/icon-mouse.svg); }
.pmp-svg-icon-mule { mask-image: url(../../includes/images/icon-mule.svg); -webkit-mask-image: url(../../includes/images/icon-mule.svg); }
.pmp-svg-icon-name { mask-image: url(../../includes/images/icon-name.svg); -webkit-mask-image: url(../../includes/images/icon-name.svg); }
.pmp-svg-icon-not-defined { mask-image: url(../../includes/images/icon-not-defined.svg); -webkit-mask-image: url(../../includes/images/icon-not-defined.svg); }
.pmp-svg-icon-ok-cats-not { mask-image: url(../../includes/images/icon-ok-cats-not.svg); -webkit-mask-image: url(../../includes/images/icon-ok-cats-not.svg); }
.pmp-svg-icon-ok-cats { mask-image: url(../../includes/images/icon-ok-cats.svg); -webkit-mask-image: url(../../includes/images/icon-ok-cats.svg); }
.pmp-svg-icon-ok-dogs-not { mask-image: url(../../includes/images/icon-ok-dogs-not.svg); -webkit-mask-image: url(../../includes/images/icon-ok-dogs-not.svg); }
.pmp-svg-icon-ok-dogs { mask-image: url(../../includes/images/icon-ok-dogs.svg); -webkit-mask-image: url(../../includes/images/icon-ok-dogs.svg); }
.pmp-svg-icon-ok-kids-not { mask-image: url(../../includes/images/icon-ok-kids-not.svg); -webkit-mask-image: url(../../includes/images/icon-ok-kids-not.svg); }
.pmp-svg-icon-ok-kids { mask-image: url(../../includes/images/icon-ok-kids.svg); -webkit-mask-image: url(../../includes/images/icon-ok-kids.svg); }
.pmp-svg-icon-onhold { mask-image: url(../../includes/images/icon-onhold.svg); -webkit-mask-image: url(../../includes/images/icon-onhold.svg); }
.pmp-svg-icon-outcome-date { mask-image: url(../../includes/images/icon-outcome-date.svg); -webkit-mask-image: url(../../includes/images/icon-outcome-date.svg); }
.pmp-svg-icon-pdf { mask-image: url(../../includes/images/icon-pdf.svg); -webkit-mask-image: url(../../includes/images/icon-pdf.svg); }
.pmp-svg-icon-pig { mask-image: url(../../includes/images/icon-pig.svg); -webkit-mask-image: url(../../includes/images/icon-pig.svg); }
.pmp-svg-icon-preferred { mask-image: url(../../includes/images/icon-preferred.svg); -webkit-mask-image: url(../../includes/images/icon-preferred.svg); }
.pmp-svg-icon-primary-color { mask-image: url(../../includes/images/icon-primary-color.svg); -webkit-mask-image: url(../../includes/images/icon-primary-color.svg); }
.pmp-svg-icon-puppy { mask-image: url(../../includes/images/icon-puppy.svg); -webkit-mask-image: url(../../includes/images/icon-puppy.svg); }
.pmp-svg-icon-rabbit { mask-image: url(../../includes/images/icon-rabbit.svg); -webkit-mask-image: url(../../includes/images/icon-rabbit.svg); }
.pmp-svg-icon-racoon { mask-image: url(../../includes/images/icon-racoon.svg); -webkit-mask-image: url(../../includes/images/icon-racoon.svg); }
.pmp-svg-icon-requires-fence { mask-image: url(../../includes/images/icon-requires-fence.svg); -webkit-mask-image: url(../../includes/images/icon-requires-fence.svg); }
.pmp-svg-icon-requires-yard { mask-image: url(../../includes/images/icon-requires-yard.svg); -webkit-mask-image: url(../../includes/images/icon-requires-yard.svg); }
.pmp-svg-icon-secondary-breed { mask-image: url(../../includes/images/icon-secondary-breed.svg); -webkit-mask-image: url(../../includes/images/icon-secondary-breed.svg); }
.pmp-svg-icon-secondary-color { mask-image: url(../../includes/images/icon-secondary-color.svg); -webkit-mask-image: url(../../includes/images/icon-secondary-color.svg); }
.pmp-svg-icon-senior { mask-image: url(../../includes/images/icon-senior.svg); -webkit-mask-image: url(../../includes/images/icon-senior.svg); }
.pmp-svg-icon-seq-id { mask-image: url(../../includes/images/icon-seq-id.svg); -webkit-mask-image: url(../../includes/images/icon-seq-id.svg); }
.pmp-svg-icon-sheep { mask-image: url(../../includes/images/icon-sheep.svg); -webkit-mask-image: url(../../includes/images/icon-sheep.svg); }
.pmp-svg-icon-shelter-id { mask-image: url(../../includes/images/icon-shelter-id.svg); -webkit-mask-image: url(../../includes/images/icon-shelter-id.svg); }
.pmp-svg-icon-site { mask-image: url(../../includes/images/icon-site.svg); -webkit-mask-image: url(../../includes/images/icon-site.svg); }
.pmp-svg-icon-size { mask-image: url(../../includes/images/icon-size.svg); -webkit-mask-image: url(../../includes/images/icon-size.svg); }
.pmp-svg-icon-snake { mask-image: url(../../includes/images/icon-snake.svg); -webkit-mask-image: url(../../includes/images/icon-snake.svg); }
.pmp-svg-icon-special-diet { mask-image: url(../../includes/images/icon-special-diet.svg); -webkit-mask-image: url(../../includes/images/icon-special-diet.svg); }
.pmp-svg-icon-special-needs { mask-image: url(../../includes/images/icon-special-needs.svg); -webkit-mask-image: url(../../includes/images/icon-special-needs.svg); }
.pmp-svg-icon-species { mask-image: url(../../includes/images/icon-species.svg); -webkit-mask-image: url(../../includes/images/icon-species.svg); }
.pmp-svg-icon-squirrel { mask-image: url(../../includes/images/icon-squirrel.svg); -webkit-mask-image: url(../../includes/images/icon-squirrel.svg); }
.pmp-svg-icon-state { mask-image: url(../../includes/images/icon-state.svg); -webkit-mask-image: url(../../includes/images/icon-state.svg); }
.pmp-svg-icon-status { mask-image: url(../../includes/images/icon-status.svg); -webkit-mask-image: url(../../includes/images/icon-status.svg); }
.pmp-svg-icon-tortoise { mask-image: url(../../includes/images/icon-tortoise.svg); -webkit-mask-image: url(../../includes/images/icon-tortoise.svg); }
.pmp-svg-icon-turtle { mask-image: url(../../includes/images/icon-turtle.svg); -webkit-mask-image: url(../../includes/images/icon-turtle.svg); }
.pmp-svg-icon-type { mask-image: url(../../includes/images/icon-type.svg); -webkit-mask-image: url(../../includes/images/icon-type.svg); }
.pmp-svg-icon-unknown { mask-image: url(../../includes/images/icon-unknown.svg); -webkit-mask-image: url(../../includes/images/icon-unknown.svg); }
.pmp-svg-icon-unweaned { mask-image: url(../../includes/images/icon-unweaned.svg); -webkit-mask-image: url(../../includes/images/icon-unweaned.svg); }
.pmp-svg-icon-unweaned-bottle { mask-image: url(../../includes/images/icon-unweaned-bottle.svg); -webkit-mask-image: url(../../includes/images/icon-unweaned-bottle.svg); }
.pmp-svg-icon-unweaned-gruel { mask-image: url(../../includes/images/icon-unweaned-gruel.svg); -webkit-mask-image: url(../../includes/images/icon-unweaned-gruel.svg); }
.pmp-svg-icon-unweaned-with-mom { mask-image: url(../../includes/images/icon-unweaned-with-mom.svg); -webkit-mask-image: url(../../includes/images/icon-unweaned-with-mom.svg); }
.pmp-svg-icon-video { mask-image: url(../../includes/images/icon-video.svg); -webkit-mask-image: url(../../includes/images/icon-video.svg); }
.pmp-svg-icon-weight { mask-image: url(../../includes/images/icon-weight.svg); -webkit-mask-image: url(../../includes/images/icon-weight.svg); }
.pmp-svg-icon-wolf { mask-image: url(../../includes/images/icon-wolf.svg); -webkit-mask-image: url(../../includes/images/icon-wolf.svg); }
.pmp-svg-icon-yard { mask-image: url(../../includes/images/icon-yard.svg); -webkit-mask-image: url(../../includes/images/icon-yard.svg); }
.pmp-svg-icon-young-adult { mask-image: url(../../includes/images/icon-young-adult.svg); -webkit-mask-image: url(../../includes/images/icon-young-adult.svg); }
.pmp-svg-icon-young { mask-image: url(../../includes/images/icon-young.svg); -webkit-mask-image: url(../../includes/images/icon-young.svg); }
.pmp-svg-icon-zip { mask-image: url(../../includes/images/icon-zip.svg); -webkit-mask-image: url(../../includes/images/icon-zip.svg); }
.pmp-svg-icon-video-play { mask-image: url(../../includes/images/video-play.svg); -webkit-mask-image: url(../../includes/images/video-play.svg); }

/* Details section */
.pmp-search-result-details {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Animal name */
.pmp-search-result-name,
.pmp-search-result-detail .pmp-search-result-name-link {
    font-size: var(--pmp-font-size-search-name, 1.25rem);
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 0.5rem;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.pmp-search-result-name-link:hover {
    color: var(--pmp-color-cta, #F38D81);
}

/* CTA Buttons Container */
.pmp-search-cta-buttons {
    display: flex;
    justify-content: center;
    margin-top: auto;
    margin-bottom: 1rem;
    padding-top: 0.75rem;
}

/* CTA Button Wrapper */
.pmp-search-cta-button {
    text-align: center;
}

/* CTA Button Link */
a.pmp-search-cta-button,
.pmp-search-cta-button a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
    border: 1px solid var(--pmp-color-cta, #F38D81);
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

a.pmp-search-cta-button:hover,
.pmp-search-cta-button a:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
    color: #FFFFFF;
}

/* Override theme link styles for CTA buttons — no parent dependency, beats most theme selectors */
a.pmp-button.pmp-search-cta-button,
a.pmp-button.pmp-search-cta-button:hover,
a.pmp-button.pmp-search-cta-button:focus,
a.pmp-button.pmp-search-cta-button:visited {
    text-decoration: none;
    color: #FFFFFF;
}

.pmp-search-results-container .pmp-search-result-container .pmp-search-result-name a,
.pmp-search-results-container .pmp-search-result-container .pmp-search-result-name-link,
.pmp-search-results-container .pmp-search-result-container .pmp-text-link,
.pmp-search-results-container .pmp-search-result-container .pmp-search-result-photo-link,
.pmp-search-results-container .pmp-search-result-container .pmp-search-result-name a:hover,
.pmp-search-results-container .pmp-search-result-container .pmp-search-result-name-link:hover,
.pmp-search-results-container .pmp-search-result-container .pmp-text-link:hover,
.pmp-search-results-container .pmp-search-result-container .pmp-search-result-photo-link:hover {
    text-decoration: none;
}

/* Individual detail field */
.pmp-search-result-detail {
    margin-bottom: 0.25rem;
    text-align: center;
    color: var(--pmp-color-body, #333);
    font-size: var(--pmp-font-size-search-value, 0.95rem);
    line-height: 1.4;
}

.pmp-search-result-detail-inline {
    display: inline;
}

/* When inline mode is used, the fields wrapper handles the row layout (universal template) */
.pmp-search-result-fields-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* Individual field - used by AF templates */
.pmp-search-result-field {
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Inline values container (when labels disabled) */
.pmp-search-result-values-inline {
    text-align: center;
    line-height: 1.6;
}

.pmp-search-result-values-inline .pmp-search-result-value {
    display: inline;
}

/* When labels enabled - column layout */
.pmp-search-result-details-with-labels {
    text-align: center;
}

.pmp-search-result-details-with-labels .pmp-search-result-field {
    display: flex;
    align-items: center;
    text-align: center;
}

.pmp-search-result-details-with-labels .pmp-search-result-value {
    flex: 1;
    text-align: center;
}

/* Label icon image */
.pmp-search-result-label-icon {
    width: var(--pmp-size-search-label-icon, 30px);
    height: var(--pmp-size-search-label-icon, 30px);
    flex-shrink: 0;
}

/* When inline mode is used on parent container (found/lost templates) */
.pmp-search-result-details-inline {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* Detail label (when labels enabled) */
.pmp-search-result-label {
    font-weight: 600;
    margin-right: 0.25rem;
    color: var(--pmp-color-body, #333);
}

/* Detail value */
.pmp-search-result-value {
    color: var(--pmp-color-body, #333);
}

/* Icons section */
.pmp-search-result-icons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee;
}

.pmp-search-result-icon {
    font-size: var(--pmp-size-search-pet-icon, 1.5rem);
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet - 992px and below */
@media (max-width: 992px) {
    /* Force 2 columns on tablet for grid-3, grid-4, grid-5 */
    .pmp-search-results.grid-3,
    .pmp-search-results.grid-4,
    .pmp-search-results.grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pmp-search-title {
        font-size: 1.75rem;
    }
    
    .pmp-search-subtitle {
        font-size: 1.1rem;
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    /* Force 1 column on mobile for ALL grids */
    .pmp-search-results.grid-1,
    .pmp-search-results.grid-2,
    .pmp-search-results.grid-3,
    .pmp-search-results.grid-4,
    .pmp-search-results.grid-5 {
        grid-template-columns: 1fr;
    }
    
    /* Form - full width on mobile */
    .pmp-search-form {
        max-width: 100%;
    }
    
    /* Form filters - stack label above field on mobile */
    .pmp-search-filter-wrapper {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .pmp-search-filter-label {
        text-align: left;
    }
    
    .pmp-search-title {
        font-size: 1.5rem;
    }
    
    .pmp-search-subtitle {
        font-size: 1rem;
    }
    
    .pmp-search-result-name,
    .pmp-search-result-detail .pmp-search-result-name-link {
        font-size: 1.1rem;
    }
    
    .pmp-search-form-buttons-wrapper {
        flex-direction: column;
        margin-left: 0; /* Reset alignment on mobile - labels stack above fields */
    }
    
    .pmp-search-submit-button,
    .pmp-search-feature-button {
        width: 100%;
    }
}

/* ============================================================================
   TEMPLATE-SPECIFIC OVERRIDES - ADOPT SEARCH
   ========================================================================== */

/* Adopt template can have specific overrides here if needed */
.pmp-search-adopt-default {
    /* Template-specific styles if different from universal */
}

/* ============================================================================
   TEMPLATE-SPECIFIC OVERRIDES - UNIVERSAL SEARCH
   ========================================================================== */

/* Universal template can have specific overrides here if needed */
.pmp-search-universal-default {
    /* Template-specific styles if different from adopt */
}

/* ============================================================================
   TEMPLATE-SPECIFIC OVERRIDES - SIMILAR ANIMALS SECTION
   ========================================================================== */

/* Similar animals section wrapper */
.pmp-template-similar .pmp-similar-animals-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
    clear: both;
    width: 100%;
}

/* Similar animals subtitle */
.pmp-template-similar .pmp-similar-animals-section .pmp-search-subtitle {
    margin-bottom: 1.5rem;
}

/* Similar animals grid - default 3 columns */
.pmp-template-similar .pmp-similar-animals-section .pmp-search-results {
    gap: 2rem;
}

/* Responsive overrides for similar animals */
@media (max-width: 992px) {
    .pmp-template-similar .pmp-similar-animals-section .pmp-search-results {
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .pmp-template-similar .pmp-similar-animals-section {
        margin-top: 2rem;
        padding-top: 1.5rem;
    }
}

/* ============================================================================
   PAGINATION
   ========================================================================== */

/* Hidden items (controlled by pagination JS) */
.pmp-pagination-hidden {
    display: none !important;
}

/* Hidden items (controlled by filter/sort JS) */
.pmp-filter-hidden {
    display: none !important;
}

/* Server-side search form hidden when client-side filter bar is active */
.pmp-search-form-client-mode {
    display: none !important;
}

.pmp-pager {
    text-align: center;
    margin: 2rem 0;
    padding: 1rem 0;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pmp-pager > div {
    display: inline-block;
}

.pmp-pager a,
.pmp-pager span {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    min-width: 2.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--pmp-color-heading, #282828);
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s;
}

.pmp-pager a:hover {
    background-color: var(--pmp-color-cta, #F38D81);
    color: #fff;
    border-color: var(--pmp-color-cta, #F38D81);
}

.pmp-pager .disabled {
    opacity: 0.5;
    pointer-events: none;
}

.pmp-pager .disabled a {
    cursor: not-allowed;
}

/* Page numbers container */
.pmp-pageNumbers a,
.pmp-pageNumbers span {
    font-weight: 500;
}

/* Current/active page */
.pmp-pageNumbers a.active,
.pmp-pageNumbers span.active,
.pmp-pageNumbers .current {
    background-color: var(--pmp-color-primary, #024463);
    color: #fff;
    border-color: var(--pmp-color-primary, #024463);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
}

/* Detail page pager - position indicator without box styling */
.pmp-detail-pager .pmp-page-position,
.pmp-detail-pager span.pmp-page-position,
.pmp-pager.pmp-detail-pager span.pmp-page-position,
.pmp-pager.pmp-detail-pager .pmp-pageNumbers span.pmp-page-position,
div.pmp-pager.pmp-detail-pager span.pmp-page-position {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    font-weight: 500;
    min-width: auto;
    padding: 0.5rem 1rem;
    color: var(--pmp-color-body, #333) !important;
}

/* Detail pager count text - remove button styling */
.pmp-detail-pager .pmp-pageNumbers,
.pmp-detail-pager .pmp-pageNumbers span,
.pmp-detail-pager .pmp-pageNumbers .current,
.pmp-detail-pager .pmp-pageNumbers span.current {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    color: var(--pmp-color-body, #333) !important;
    font-weight: 500;
    cursor: default;
    pointer-events: none;
}

/* ============================================================================
   NO RESULTS / ERROR MESSAGES
   ========================================================================== */

.pmp-no-results,
.pmp-search-no-results,
.pmp-error {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-size: 1.1rem;
    grid-column: 1 / -1;
}

.pmp-search-result-details .pmp-error {
    padding: 0;
    font-size: inherit;
    grid-column: auto;
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Hide elements */
.pmp-hidden {
    display: none;
}

/* Screen reader only */
.pmp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * PetMatchPro Detail Templates - Standardized CSS
 * Version: 7.1.0
 * 
 * Based on actual DOM structure from adopt-default template
 */

/* ===================================================================
   MONARCH SOCIAL SHARE ICON OVERRIDES
   Generated dynamically via PHP for theme override support
   See: class-pet-match-pro-public.php -> getSocialIconCss()
   =================================================================== */

/* ===================================================================
   BASE CONTAINER & LAYOUT
   =================================================================== */

.pmp-details-container {
    display: flex;
    gap: 30px;
    max-width: 95% !important;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* ===================================================================
   SIMILAR ANIMALS WRAPPER
   =================================================================== */

.pmp-similar-animals-wrapper {
    margin-top: 60px;
    margin-bottom: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 2px solid #e5e5e5;
    width: 100%;
    max-width: 95% !important;
    margin-left: auto;
    margin-right: auto;
    clear: both;
}

/* Title and subtitle styling to match search template */
.pmp-similar-animals-wrapper .pmp-search-title {
    font-size: var(--pmp-font-size-search-title, 2rem);
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 1rem;
}

.pmp-similar-animals-wrapper .pmp-search-subtitle {
    font-size: var(--pmp-font-size-search-subtitle, 1.25rem);
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 10px;
    line-height: 1em;
}

/* Ensure search results display properly in similar section */
.pmp-similar-animals-wrapper .pmp-search-results-container,
.pmp-similar-animals-wrapper div.pmp-search-results-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Support all grid layouts in similar section */
.pmp-similar-animals-wrapper .pmp-search-results,
.pmp-similar-animals-wrapper div.pmp-search-results {
    display: grid;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.pmp-similar-animals-wrapper .pmp-search-results.grid-1 {
    grid-template-columns: 1fr;
}

.pmp-similar-animals-wrapper .pmp-search-results.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.pmp-similar-animals-wrapper .pmp-search-results.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pmp-similar-animals-wrapper .pmp-search-results.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.pmp-similar-animals-wrapper .pmp-search-results.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* Style cards to match adopt-default detail template aesthetic */
.pmp-similar-animals-wrapper .pmp-search-result-container {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.pmp-similar-animals-wrapper .pmp-search-result-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card images */
.pmp-similar-animals-wrapper .pmp-search-result-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

/* Card content */
.pmp-similar-animals-wrapper .pmp-search-result-details {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/* Animal name - match detail template blue */
.pmp-similar-animals-wrapper .pmp-search-result-name,
.pmp-similar-animals-wrapper .pmp-search-result-name-link {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c5aa0;
    text-align: center;
    margin-bottom: 0.75rem;
    display: block;
    text-decoration: none;
}

.pmp-similar-animals-wrapper .pmp-search-result-name-link:hover {
    color: var(--pmp-color-cta, #F38D81);
}

/* Detail fields */
.pmp-similar-animals-wrapper .pmp-search-result-detail {
    margin-bottom: 0.35rem;
    text-align: center;
    color: var(--pmp-color-body, #333);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Detail labels - match detail template blue */
.pmp-similar-animals-wrapper .pmp-search-result-label {
    font-weight: 600;
    margin-right: 0.35rem;
    color: #2c5aa0;
}

.pmp-similar-animals-wrapper .pmp-search-result-value {
    color: var(--pmp-color-body, #333);
}

/* Icons section in search cards */
.pmp-similar-animals-wrapper .pmp-search-result-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border: none;
}

.pmp-similar-animals-wrapper .pmp-search-result-icon {
    width: var(--pmp-size-search-pet-icon, 32px);
    height: var(--pmp-size-search-pet-icon, 32px);
    flex-shrink: 0;
}

.pmp-similar-animals-wrapper .pmp-search-result-icon img,
.pmp-similar-animals-wrapper .pmp-search-result-icon .pmp-svg-icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* Remove underlines from all links in similar section */
.pmp-similar-animals-wrapper a {
    text-decoration: none !important;
}

.pmp-similar-animals-wrapper a:hover {
    text-decoration: none !important;
}

/* Responsive - tablet */
@media (max-width: 992px) {
    .pmp-similar-animals-wrapper .pmp-search-results.grid-3,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-4,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .pmp-similar-animals-wrapper {
        margin-top: 40px;
        padding-top: 30px;
    }
    
    .pmp-similar-animals-wrapper .pmp-search-results.grid-1,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-2,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-3,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-4,
    .pmp-similar-animals-wrapper .pmp-search-results.grid-5 {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================
   MEDIA SECTION (Left Column - Fixed Width)
   =================================================================== */

.pmp-details-media {
    flex: 0 0 47%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

/* Image row - contains main image and thumbnails side by side */
.pmp-details-image-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
}

/* Main Photo - Takes available width beside thumbnails */
.pmp-details-image-main {
    flex: 1 1 calc(100% - 110px);
    min-width: 200px;
    position: relative;
}

.pmp-details-image-main img.pmp-details-photo {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Special Needs Overlay */
.pmp-detail-special-needs-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50px;
    max-width: 50px;
    height: auto;
    z-index: 10;
}

#imgtext {
    display: none;
}

/* Thumbnails - Beside image on right */
.pmp-details-thumbnails {
    flex: 0 0 90px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pmp-details-thumbnail {
    width: 90px;
    height: 90px;
    border: 2px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s;
}

.pmp-details-thumbnail:last-child {
    margin-bottom: 0;
}

.pmp-details-thumbnail:hover {
    border-color: #0073aa;
}

.pmp-details-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video Section - Below thumbnails */
.pmp-details-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
    width: 100%;
}

.pmp-details-video {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 4px;
    border: 2px solid #e5e5e5;
    cursor: pointer;
    transition: border-color 0.2s;
}

.pmp-details-video:hover {
    border-color: #0073aa;
}

.pmp-details-video a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
}

.pmp-details-video a::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    mask-image: url(../../includes/images/video-play.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../../includes/images/video-play.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.pmp-details-video a::after {
    display: none;
}

/* Media Row - Main image + column side by side */
.pmp-details-media-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

/* Main image takes available space in media-row */
.pmp-details-media-row .pmp-details-image-main {
    flex: 1 1 auto;
    min-width: 200px;
}

/* Main column wrapper (image + video player stacked) */
.pmp-details-media-row .pmp-details-media-main {
    flex: 1 1 auto;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pmp-details-media-row .pmp-details-media-main .pmp-details-image-main {
    flex: none;
    min-width: unset;
}

.pmp-details-media-row .pmp-details-media-main .pmp-video-player-wrapper {
    margin-top: 0;
}

.pmp-details-media-row .pmp-details-image-main img:not(.pmp-overlay) {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Media Column - Thumbnails + videos stacked vertically */
.pmp-details-media-column {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Videos vertical when in media column */
.pmp-details-media-column .pmp-details-videos {
    flex-direction: column;
    margin-top: 0;
}

/* Social Share Section - Full width below image row */
.pmp-details-social-share {
    width: 100%;
    padding: 15px;
    background: #ffffff;
    border-radius: 8px;
}

.pmp-details-social-share-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--pmp-color-body, #333);
    margin-bottom: 10px;
}

.pmp-details-social-share-icons {
    display: flex !important;
    gap: 10px;
    flex-wrap: nowrap !important;
    align-items: center;
    overflow-x: auto;
}

.pmp-details-social-share-icons a,
.pmp-details-social-share-icons img,
.pmp-details-social-share-icons div {
    flex-shrink: 0 !important;
}

/* Target Monarch plugin container */
.pmp-details-social-share-icons .et_social_inline {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
}

.pmp-details-social-share-icons .et_social_networks {
    flex-shrink: 0 !important;
}

.pmp-details-social-share-icons .et_social_networks.et_social_autowidth {
    flex-shrink: 0 !important;
}

/* Target the actual UL that contains the icons */
.pmp-details-social-share-icons ul.et_social_icons_container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.pmp-details-social-share-icons ul.et_social_icons_container li {
    flex-shrink: 0 !important;
}

/* ===================================================================
   CONTENT SECTION (Right Column - Flexible Width)
   =================================================================== */

.pmp-details-content {
    flex: 1;
    min-width: 0;
}

/* Title */
.pmp-details-title {
    margin: 0 0 20px 0;
    font-size: var(--pmp-font-size-detail-title, 28px);
    font-weight: 700;
    color: #2c5aa0;
    line-height: 1.3;
}

/* Fields */
.pmp-details-fields {
    margin-bottom: 25px;
}

.pmp-details-field {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
}

.pmp-details-field:last-child {
    border-bottom: none;
}

.pmp-details-field-label {
    flex: 0 0 45%;
/*    flex: 0 0 180px; */
    font-weight: 600;
    font-size: var(--pmp-font-size-detail-label, 150%);
    color: #2c5aa0;
    padding-right: 15px;
}

.pmp-details-field-value {
    flex: 1;
    color: var(--pmp-color-body, #333);
    word-break: break-word;
    font-size: var(--pmp-font-size-detail-value, 110%);
}

.pmp-details-field-value a {
    color: #0073aa;
    text-decoration: none;
}

.pmp-details-field-value a:hover {
    text-decoration: underline;
}

/* Conversion templates - no underlines on field values */
.pmp-template-conversion .pmp-details-field-value a,
.pmp-template-conversion-no-app .pmp-details-field-value a,
.pmp-template-poster .pmp-details-field-value a,
.pmp-template-similar .pmp-details-field-value a,
.pmp-template-default .pmp-details-field-value a {
    text-decoration: none;
}

.pmp-template-conversion .pmp-details-field-value a:hover,
.pmp-template-conversion-no-app .pmp-details-field-value a:hover,
.pmp-template-poster .pmp-details-field-value a:hover,
.pmp-template-similar .pmp-details-field-value a:hover,
.pmp-template-default .pmp-details-field-value a:hover {
    text-decoration: none;
}

/* Conversion templates - remove field borders */
.pmp-template-conversion .pmp-details-field,
.pmp-template-conversion-no-app .pmp-details-field,
.pmp-template-poster .pmp-details-field,
.pmp-template-similar .pmp-details-field,
.pmp-template-default .pmp-details-field {
    border-bottom: none;
    padding: 8px 0;
}

/* Currency symbol now handled by PHP formatCurrencyValue() */

/* Icons */
.pmp-details-icons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Icon row in search cards (AF templates) */
.pmp-details-icons-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem auto;
}

.pmp-details-icon,
.pmp-detail-icon {
    width: var(--pmp-size-detail-pet-icon, 32px);
    height: var(--pmp-size-detail-pet-icon, 32px);
}

.pmp-details-icon img,
.pmp-details-icon .pmp-svg-icon,
.pmp-detail-icon .pmp-svg-icon {
    width: 100%;
    height: 100%;
    display: block;
}

/* Description */
.pmp-details-description {
    font-size: var(--pmp-font-size-detail-description, 1rem);
    margin-bottom: 25px;
}

.pmp-details-description-label {
    font-size: 200%;
    font-weight: 600;
    color: #2c5aa0;
    margin-bottom: 10px;
}

.pmp-details-description-value {
    color: var(--pmp-color-body, #333);
    line-height: 1.6;
}

/* ===================================================================
   BUTTONS
   =================================================================== */

/* Conversion Buttons - Styled as Buttons */
.pmp-details-button {
    display: inline-flex;
    width: 30%;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #FFF;
    transition: 0.4s;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--pmp-font-size-detail-button, 16px);
    line-height: 20px;
    font-family: inherit;
    text-transform: capitalize;
    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.pmp-details-button:last-child {
    margin-right: 0;
}

/* Override theme link styles (e.g., Astra .ast-single-post .entry-content a) */
.pmp-details-container .pmp-details-content .pmp-details-button,
.pmp-details-container .pmp-details-content .pmp-details-button:hover,
.pmp-details-container .pmp-details-content .pmp-details-button:focus,
.pmp-details-container .pmp-details-content .pmp-details-button:visited {
    text-decoration: none;
    color: #FFF;
}

/* Prevent theme underlines on poster button — universal across all templates */
div.pmp-details-poster-print-button a,
div.pmp-details-poster-print-button a:link,
div.pmp-details-poster-print-button a:hover,
div.pmp-details-poster-print-button a:focus,
div.pmp-details-poster-print-button a:visited,
div.pmp-details-poster-print-button a:active {
    text-decoration: none;
    color: #FFF;
}

/* Override theme link styles for profile template buttons */
.pmp-details-profile-wrapper .pmp-details-profile-results-wrapper a.pmp-details-profile-button,
.pmp-details-profile-wrapper .pmp-details-profile-results-wrapper a.pmp-details-profile-button:hover,
.pmp-details-profile-wrapper .pmp-details-profile-results-wrapper a.pmp-details-profile-button:focus,
.pmp-details-profile-wrapper .pmp-details-profile-results-wrapper a.pmp-details-profile-button:visited {
    text-decoration: none;
    color: #FFF;
}

.pmp-details-button-call {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-call:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-email {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-email:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-meet {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-meet:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-adoption {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-adoption:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-foster {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-foster:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-donate {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
}

.pmp-details-button-donate:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

.pmp-details-button-poster {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
    width: 100%;
    max-width: 100%;
}

.pmp-details-button-poster:hover {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
}

/* Print Poster Button Container - Full width below social share */
.pmp-details-poster-print-button {
    width: 100%;
    margin-top: 15px;
}

.pmp-details-poster-print-button a,
.pmp-details-poster-print-button span {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    background: var(--pmp-color-cta, #F38D81);
    border: 2px solid var(--pmp-color-cta, #F38D81);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.pmp-details-poster-print-button a:hover {
    background: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
    color: #FFF;
}

/* Not configured state */
.pmp-details-poster-print-button .pmp-notice-configure {
    background: #f0f0f1;
    border-color: #c3c4c7;
    color: #787c82;
    cursor: default;
}

.pmp-details-button-return {
    background: var(--pmp-color-primary, #024463);
    border: 1px solid var(--pmp-color-primary, #024463);
}

.pmp-details-button-return:hover {
    background: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
    color: #FFF;
}

/* Configuration Notice Buttons - inherits --pmp-font-size-detail-button */
.pmp-notice-configure,
.pmp-button-detail-application-adopt-button-notice-configure,
.pmp-button-detail-application-foster-button-notice-configure {
    display: inline-flex;
    width: 30%;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #FFF;
    transition: 0.4s;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--pmp-font-size-detail-button, 16px);
    line-height: 20px;
    font-family: inherit;
    text-transform: capitalize;
    text-decoration: none;
    margin-right: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: #999;
    border: 1px solid #999;
}

.pmp-notice-configure:hover,
.pmp-button-detail-application-adopt-button-notice-configure:hover,
.pmp-button-detail-application-foster-button-notice-configure:hover {
    background: #666;
    border: 1px solid #666;
    color: #FFF;
}

/* Other Buttons - Text Links Only */
.pmp-details-buttons-other {
    margin-top: 20px;
}

.pmp-details-buttons-other a {
    display: inline-block;
    color: #0073aa;
    text-decoration: none;
    margin-right: 15px;
    font-size: 14px;
    padding: 0;
    background: none;
    border: none;
    font-weight: normal;
}

.pmp-details-buttons-other a:hover {
    text-decoration: underline;
}

/* ===================================================================
   RESPONSIVE DESIGN
   =================================================================== */

@media (max-width: 768px) {
    .pmp-details-container {
        flex-direction: column;
    }
    
    .pmp-details-media {
        flex: 1 1 auto;
    }
    
    .pmp-details-image-main {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .pmp-details-thumbnails {
        display: flex;
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: 10px;
    }
    
    .pmp-details-thumbnail {
        flex-shrink: 0;
        margin-bottom: 0;
    }
    
    .pmp-details-field {
        flex-direction: column;
        gap: 5px;
    }
    
    .pmp-details-field-label {
        flex: 1 1 auto;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .pmp-details-title {
        font-size: 24px;
    }
    
    .pmp-details-button {
        display: block;
        width: 100%;
        margin-right: 0;
    }
}

/* ===================================================================
   WIDE TEMPLATE SPECIFIC STYLES
   =================================================================== */

.pmp-template-wide {
    max-width: 100%;
}

.pmp-template-wide .pmp-details-title {
    width: 100%;
    margin-bottom: 20px;
}

/* Wide media section - main image left, thumbnails right */
.pmp-wide-media {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
    width: 85%;
}

.pmp-wide-image {
    flex: 1 1 auto;
    position: relative;
}

.pmp-wide-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.pmp-wide-thumbnails {
    flex: 0 0 100px;
}

.pmp-wide-thumbnails .pmp-details-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pmp-wide-thumbnails .pmp-details-thumbnail {
    width: 100px;
    height: 100px;
}

.pmp-wide-thumbnails .pmp-details-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

/* Wide template video - match thumbnail size */
.pmp-wide-thumbnails .pmp-details-videos {
    padding-top: 15px;
}

.pmp-wide-thumbnails .pmp-details-video {
    width: 100px;
    height: 100px;
}

/* Wide content section */
.pmp-wide-content {
    width: 100%;
}

/* Wide template - field rows like default template */
.pmp-template-wide .pmp-details-fields {
    margin-bottom: 25px;
}

.pmp-template-wide .pmp-details-field {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.pmp-template-wide .pmp-details-field-label {
    flex: 0 0 25%;
    font-weight: 600;
}

.pmp-template-wide .pmp-details-field-value {
    flex: 1 1 auto;
}

/* Wide template description */
.pmp-template-wide .pmp-details-description {
    margin: 25px 0;
}

.pmp-template-wide .pmp-details-description-label {
    font-weight: 600;
    margin-bottom: 10px;
}

.pmp-template-wide .pmp-details-instructions {
    margin-bottom: 25px;
}

/* Wide template buttons - 3 across */
.pmp-template-wide .pmp-details-buttons {
    display: flex;
    gap: 10px;
}

.pmp-template-wide .pmp-details-button {
    flex: 1 1 0;
}

/* Override theme link styles for wide template buttons */
.pmp-template-wide a.pmp-details-button,
.pmp-template-wide a.pmp-details-button:hover,
.pmp-template-wide a.pmp-details-button:focus,
.pmp-template-wide a.pmp-details-button:visited {
    text-decoration: none;
}

/* Wide template responsive */
@media (max-width: 768px) {
    .pmp-wide-media {
        flex-direction: column;
        width: 100%;
    }
    
    .pmp-wide-thumbnails {
        width: 100%;
        flex: 0 0 auto;
    }
    
    .pmp-wide-thumbnails .pmp-details-thumbnails {
        flex-direction: row;
        overflow-x: auto;
    }
    
    .pmp-wide-thumbnails .pmp-details-thumbnail {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }
    
    .pmp-wide-thumbnails .pmp-details-video {
        width: 80px;
        height: 80px;
    }
    
    .pmp-template-wide .pmp-details-field {
        flex-direction: column;
        gap: 4px;
    }
    
    .pmp-template-wide .pmp-details-field-label {
        flex: none;
    }
    
    .pmp-template-wide .pmp-details-buttons {
        flex-direction: column;
    }
    
    .pmp-template-wide .pmp-details-button {
        width: 100%;
    }
}

/* ===================================================================
   PROFILE 3-COLUMN TEMPLATE STYLES
   Supports: pmp-template-profile-3col-adopt
             pmp-template-profile-3col-similar-adopt
   =================================================================== */

/* Main section */
.pmp-details-profile {
    width: 100%;
    max-width: 95%;
}

/* Wrapper - both template variants */
.pmp-details-profile-wrapper,
.pmp-template-profile-3col-adopt,
.pmp-template-profile-3col-similar-adopt {
    width: 100%;
    max-width: 95%;
    margin: auto;
}

/* Content - flex layout */
.pmp-details-profile-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

/* Slider wrapper (contains media) */
.pmp-details-profile-slider-wrapper {
    flex: 0 0 35%;
    max-width: 35%;
}

/* Media container */
.pmp-details-profile-media {
    width: 100%;
    display: block;
}

/* Main image */
.pmp-detail-profile-image {
    position: relative;
}

.pmp-detail-profile-image img,
.pmp-detail-profile-image #expandedImg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* PDF poster overlay */
.pmp-details-profile-pdf {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.pmp-details-profile-pdf-download {
    display: block;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    background-image: url(../../includes/images/icon-pdf.svg);
    background-size: 24px;
    background-position: center;
    background-repeat: no-repeat;
}

.pmp-details-profile-pdf-download:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Thumbnails container - wraps to multiple rows */
.pmp-details-profile-thumbs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: 100%;
}

/* Thumbnail items (photos) */
.pmp-details-profile-thumbs .pmp-imgThumb,
.pmp-details-profile-thumbs .pmp-details-thumbnail {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
}

.pmp-details-profile-thumbs .pmp-imgThumb img,
.pmp-details-profile-thumbs .pmp-details-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

/* Video play icon in thumbnails */
a.pmp-detail-video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
}

a.pmp-detail-video-play-icon::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    mask-image: url(../../includes/images/video-play.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../../includes/images/video-play.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

/* Disable ::after triangle when using SVG play icon */
a.pmp-detail-video-play-icon::after {
    display: none;
}

/* Profile template video icon */
.pmp-details-profile-thumbs a.pmp-detail-video-play-icon {
    width: 60px;
    height: 60px;
}

.pmp-details-profile-thumbs a.pmp-detail-video-play-icon::before {
    width: 40px;
    height: 40px;
}

.pmp-details-profile-thumbs a.pmp-detail-video-play-icon::after {
    display: none;
}

/* Wrapper divs - 3-column templates need contents to flow to parent flex */
.pmp-template-profile-3col-adopt .pmp-details-thumbnails,
.pmp-template-profile-3col-adopt .pmp-details-videos,
.pmp-template-profile-3col-similar-adopt .pmp-details-thumbnails,
.pmp-template-profile-3col-similar-adopt .pmp-details-videos {
    display: contents;
}

/* Profile template: let items flow directly to parent flex container for proper wrapping */
.pmp-details-profile-thumbs .pmp-details-thumbnails,
.pmp-details-profile-thumbs .pmp-details-videos {
    display: contents;
}

.pmp-details-profile-thumbs .pmp-details-video {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

/* ===================================================================
   VIDEO PLAYER (video="player" mode)
   Embedded YouTube player with navigation controls
   =================================================================== */

.pmp-video-player-wrapper {
    width: 100%;
    margin-top: 15px;
}

.pmp-video-player-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.pmp-video-player-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Navigation arrows */
.pmp-video-player-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.pmp-video-player-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.pmp-video-player-prev {
    left: 10px;
}

.pmp-video-player-next {
    right: 10px;
}

/* Dot indicators */
.pmp-video-player-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.pmp-video-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

.pmp-video-player-dot:hover {
    background: #999;
}

.pmp-video-player-dot-active {
    background: #333;
}

/* Video player in media section (poster/conversion templates) */
.pmp-details-media .pmp-video-player-wrapper {
    margin-bottom: 15px;
}

/* Results wrapper (right column) */
.pmp-details-profile-results-wrapper {
    flex: 1;
    min-width: 0;
}

/* Results title */
.pmp-details-profile-results-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

/* Results list (fields) */
.pmp-details-profile-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 50px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.pmp-details-profile-results li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-left: 40px;
    position: relative;
    line-height: 1.4;
}

.pmp-details-profile-results li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    background-color: #000000;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Field icons - name */
.pmp-detail-profile-result-name::before {
    -webkit-mask-image: url(../../includes/images/icon-name.svg);
    mask-image: url(../../includes/images/icon-name.svg);
}

/* Field icons - species */
.pmp-detail-profile-result-dog::before {
    -webkit-mask-image: url(../../includes/images/icon-dog.svg);
    mask-image: url(../../includes/images/icon-dog.svg);
}

.pmp-detail-profile-result-cat::before {
    -webkit-mask-image: url(../../includes/images/icon-cat.svg);
    mask-image: url(../../includes/images/icon-cat.svg);
}

/* Field icons - sex */
.pmp-detail-profile-result-male::before {
    -webkit-mask-image: url(../../includes/images/icon-male.svg);
    mask-image: url(../../includes/images/icon-male.svg);
}

.pmp-detail-profile-result-female::before {
    -webkit-mask-image: url(../../includes/images/icon-female.svg);
    mask-image: url(../../includes/images/icon-female.svg);
}

.pmp-detail-profile-result-unknown::before {
    -webkit-mask-image: url(../../includes/images/icon-unknown.svg);
    mask-image: url(../../includes/images/icon-unknown.svg);
}

/* Field icons - other fields */
.pmp-detail-profile-result-age::before {
    -webkit-mask-image: url(../../includes/images/icon-age.svg);
    mask-image: url(../../includes/images/icon-age.svg);
}

.pmp-detail-profile-result-primary-color::before {
    -webkit-mask-image: url(../../includes/images/icon-primary-color.svg);
    mask-image: url(../../includes/images/icon-primary-color.svg);
}

.pmp-detail-profile-result-size::before {
    -webkit-mask-image: url(../../includes/images/icon-size.svg);
    mask-image: url(../../includes/images/icon-size.svg);
}

.pmp-detail-profile-result-site::before {
    -webkit-mask-image: url(../../includes/images/icon-site.svg);
    mask-image: url(../../includes/images/icon-site.svg);
}

.pmp-detail-profile-result-id::before {
    -webkit-mask-image: url(../../includes/images/icon-id.svg);
    mask-image: url(../../includes/images/icon-id.svg);
}

.pmp-detail-profile-result-fee::before {
    -webkit-mask-image: url(../../includes/images/icon-adoption-fee.svg);
    mask-image: url(../../includes/images/icon-adoption-fee.svg);
}

.pmp-detail-profile-result-declawed::before {
    -webkit-mask-image: url(../../includes/images/icon-declawed.svg);
    mask-image: url(../../includes/images/icon-declawed.svg);
}

.pmp-detail-profile-result-altered::before {
    -webkit-mask-image: url(../../includes/images/icon-altered.svg);
    mask-image: url(../../includes/images/icon-altered.svg);
}

/* Additional AF field icons */
.pmp-detail-profile-result-breed-primary::before,
.pmp-detail-profile-result-breed::before {
    -webkit-mask-image: url(../../includes/images/icon-breed.svg);
    mask-image: url(../../includes/images/icon-breed.svg);
}

.pmp-detail-profile-result-secondary-breed::before {
    -webkit-mask-image: url(../../includes/images/icon-secondary-breed.svg);
    mask-image: url(../../includes/images/icon-secondary-breed.svg);
}

.pmp-detail-profile-result-birthday::before {
    -webkit-mask-image: url(../../includes/images/icon-birthday.svg);
    mask-image: url(../../includes/images/icon-birthday.svg);
}

.pmp-detail-profile-result-adoption-fee::before {
    -webkit-mask-image: url(../../includes/images/icon-adoption-fee.svg);
    mask-image: url(../../includes/images/icon-adoption-fee.svg);
}

.pmp-detail-profile-result-species::before {
    -webkit-mask-image: url(../../includes/images/icon-species.svg);
    mask-image: url(../../includes/images/icon-species.svg);
}

.pmp-detail-profile-result-secondary-color::before {
    -webkit-mask-image: url(../../includes/images/icon-secondary-color.svg);
    mask-image: url(../../includes/images/icon-secondary-color.svg);
}

.pmp-detail-profile-result-rabbit::before {
    -webkit-mask-image: url(../../includes/images/icon-rabbit.svg);
    mask-image: url(../../includes/images/icon-rabbit.svg);
}

.pmp-detail-profile-result-bird::before {
    -webkit-mask-image: url(../../includes/images/icon-bird.svg);
    mask-image: url(../../includes/images/icon-bird.svg);
}

.pmp-detail-profile-result-horse::before {
    -webkit-mask-image: url(../../includes/images/icon-horse.svg);
    mask-image: url(../../includes/images/icon-horse.svg);
}

.pmp-detail-profile-result-guinea-pig::before,
.pmp-detail-profile-result-small-animal::before {
    -webkit-mask-image: url(../../includes/images/icon-small-animal.svg);
    mask-image: url(../../includes/images/icon-small-animal.svg);
}

.pmp-detail-profile-result-weight::before {
    -webkit-mask-image: url(../../includes/images/icon-weight.svg);
    mask-image: url(../../includes/images/icon-weight.svg);
}

.pmp-detail-profile-result-microchip::before {
    -webkit-mask-image: url(../../includes/images/icon-microchip.svg);
    mask-image: url(../../includes/images/icon-microchip.svg);
}

.pmp-detail-profile-result-location::before,
.pmp-detail-profile-result-kennel::before {
    -webkit-mask-image: url(../../includes/images/icon-location.svg);
    mask-image: url(../../includes/images/icon-location.svg);
}

.pmp-detail-profile-result-intake-date::before {
    -webkit-mask-image: url(../../includes/images/icon-intake-date.svg);
    mask-image: url(../../includes/images/icon-intake-date.svg);
}

.pmp-detail-profile-result-seq-id::before {
    -webkit-mask-image: url(../../includes/images/icon-seq-id.svg);
    mask-image: url(../../includes/images/icon-seq-id.svg);
}

.pmp-detail-profile-result-status::before {
    -webkit-mask-image: url(../../includes/images/icon-status.svg);
    mask-image: url(../../includes/images/icon-status.svg);
}

.pmp-detail-profile-result-address::before {
    -webkit-mask-image: url(../../includes/images/icon-address.svg);
    mask-image: url(../../includes/images/icon-address.svg);
}

.pmp-detail-profile-result-adopt-profile-url::before {
    -webkit-mask-image: url(../../includes/images/icon-adopt-profile-url.svg);
    mask-image: url(../../includes/images/icon-adopt-profile-url.svg);
}

.pmp-detail-profile-result-adoption-pending::before {
    -webkit-mask-image: url(../../includes/images/icon-adoption-pending.svg);
    mask-image: url(../../includes/images/icon-adoption-pending.svg);
}

.pmp-detail-profile-result-adult::before {
    -webkit-mask-image: url(../../includes/images/icon-adult.svg);
    mask-image: url(../../includes/images/icon-adult.svg);
}

.pmp-detail-profile-result-adult-cat::before {
    -webkit-mask-image: url(../../includes/images/icon-adult-cat.svg);
    mask-image: url(../../includes/images/icon-adult-cat.svg);
}

.pmp-detail-profile-result-adult-dog::before {
    -webkit-mask-image: url(../../includes/images/icon-adult-dog.svg);
    mask-image: url(../../includes/images/icon-adult-dog.svg);
}

.pmp-detail-profile-result-age-2::before {
    -webkit-mask-image: url(../../includes/images/icon-age-2.svg);
    mask-image: url(../../includes/images/icon-age-2.svg);
}

.pmp-detail-profile-result-available::before {
    -webkit-mask-image: url(../../includes/images/icon-available.svg);
    mask-image: url(../../includes/images/icon-available.svg);
}

.pmp-detail-profile-result-baby::before {
    -webkit-mask-image: url(../../includes/images/icon-baby.svg);
    mask-image: url(../../includes/images/icon-baby.svg);
}

.pmp-detail-profile-result-bat::before {
    -webkit-mask-image: url(../../includes/images/icon-bat.svg);
    mask-image: url(../../includes/images/icon-bat.svg);
}

.pmp-detail-profile-result-bear::before {
    -webkit-mask-image: url(../../includes/images/icon-bear.svg);
    mask-image: url(../../includes/images/icon-bear.svg);
}

.pmp-detail-profile-result-building::before {
    -webkit-mask-image: url(../../includes/images/icon-building.svg);
    mask-image: url(../../includes/images/icon-building.svg);
}

.pmp-detail-profile-result-check::before {
    -webkit-mask-image: url(../../includes/images/icon-check.svg);
    mask-image: url(../../includes/images/icon-check.svg);
}

.pmp-detail-profile-result-city::before {
    -webkit-mask-image: url(../../includes/images/icon-city.svg);
    mask-image: url(../../includes/images/icon-city.svg);
}

.pmp-detail-profile-result-clear::before {
    -webkit-mask-image: url(../../includes/images/icon-clear.svg);
    mask-image: url(../../includes/images/icon-clear.svg);
}

.pmp-detail-profile-result-country::before {
    -webkit-mask-image: url(../../includes/images/icon-country.svg);
    mask-image: url(../../includes/images/icon-country.svg);
}

.pmp-detail-profile-result-cow::before {
    -webkit-mask-image: url(../../includes/images/icon-cow.svg);
    mask-image: url(../../includes/images/icon-cow.svg);
}

.pmp-detail-profile-result-declaw::before {
    -webkit-mask-image: url(../../includes/images/icon-declaw.svg);
    mask-image: url(../../includes/images/icon-declaw.svg);
}

.pmp-detail-profile-result-deer::before {
    -webkit-mask-image: url(../../includes/images/icon-deer.svg);
    mask-image: url(../../includes/images/icon-deer.svg);
}

.pmp-detail-profile-result-description::before {
    -webkit-mask-image: url(../../includes/images/icon-description.svg);
    mask-image: url(../../includes/images/icon-description.svg);
}

.pmp-detail-profile-result-display-age::before {
    -webkit-mask-image: url(../../includes/images/icon-display-age.svg);
    mask-image: url(../../includes/images/icon-display-age.svg);
}

.pmp-detail-profile-result-display-age-2::before {
    -webkit-mask-image: url(../../includes/images/icon-display-age-2.svg);
    mask-image: url(../../includes/images/icon-display-age-2.svg);
}

.pmp-detail-profile-result-donkey::before {
    -webkit-mask-image: url(../../includes/images/icon-donkey.svg);
    mask-image: url(../../includes/images/icon-donkey.svg);
}

.pmp-detail-profile-result-dove::before {
    -webkit-mask-image: url(../../includes/images/icon-dove.svg);
    mask-image: url(../../includes/images/icon-dove.svg);
}

.pmp-detail-profile-result-duck::before {
    -webkit-mask-image: url(../../includes/images/icon-duck.svg);
    mask-image: url(../../includes/images/icon-duck.svg);
}

.pmp-detail-profile-result-energy-level::before {
    -webkit-mask-image: url(../../includes/images/icon-energy-level.svg);
    mask-image: url(../../includes/images/icon-energy-level.svg);
}

.pmp-detail-profile-result-error::before {
    -webkit-mask-image: url(../../includes/images/icon-error.svg);
    mask-image: url(../../includes/images/icon-error.svg);
}

.pmp-detail-profile-result-est-birthday::before {
    -webkit-mask-image: url(../../includes/images/icon-est-birthday.svg);
    mask-image: url(../../includes/images/icon-est-birthday.svg);
}

.pmp-detail-profile-result-featured::before {
    -webkit-mask-image: url(../../includes/images/icon-featured.svg);
    mask-image: url(../../includes/images/icon-featured.svg);
}

.pmp-detail-profile-result-fence::before {
    -webkit-mask-image: url(../../includes/images/icon-fence.svg);
    mask-image: url(../../includes/images/icon-fence.svg);
}

.pmp-detail-profile-result-fish::before {
    -webkit-mask-image: url(../../includes/images/icon-fish.svg);
    mask-image: url(../../includes/images/icon-fish.svg);
}

.pmp-detail-profile-result-foster::before {
    -webkit-mask-image: url(../../includes/images/icon-foster.svg);
    mask-image: url(../../includes/images/icon-foster.svg);
}

.pmp-detail-profile-result-found::before {
    -webkit-mask-image: url(../../includes/images/icon-found.svg);
    mask-image: url(../../includes/images/icon-found.svg);
}

.pmp-detail-profile-result-frog::before {
    -webkit-mask-image: url(../../includes/images/icon-frog.svg);
    mask-image: url(../../includes/images/icon-frog.svg);
}

.pmp-detail-profile-result-gender::before {
    -webkit-mask-image: url(../../includes/images/icon-gender.svg);
    mask-image: url(../../includes/images/icon-gender.svg);
}

.pmp-detail-profile-result-google-formatted-address::before {
    -webkit-mask-image: url(../../includes/images/icon-google-formatted-address.svg);
    mask-image: url(../../includes/images/icon-google-formatted-address.svg);
}

.pmp-detail-profile-result-google-geometry::before {
    -webkit-mask-image: url(../../includes/images/icon-google-geometry.svg);
    mask-image: url(../../includes/images/icon-google-geometry.svg);
}

.pmp-detail-profile-result-google-lat::before {
    -webkit-mask-image: url(../../includes/images/icon-google-lat.svg);
    mask-image: url(../../includes/images/icon-google-lat.svg);
}

.pmp-detail-profile-result-google-lng::before {
    -webkit-mask-image: url(../../includes/images/icon-google-lng.svg);
    mask-image: url(../../includes/images/icon-google-lng.svg);
}

.pmp-detail-profile-result-house-trained::before {
    -webkit-mask-image: url(../../includes/images/icon-house-trained.svg);
    mask-image: url(../../includes/images/icon-house-trained.svg);
}

.pmp-detail-profile-result-house-trained-not::before {
    -webkit-mask-image: url(../../includes/images/icon-house-trained-not.svg);
    mask-image: url(../../includes/images/icon-house-trained-not.svg);
}

.pmp-detail-profile-result-hypoallergenic::before {
    -webkit-mask-image: url(../../includes/images/icon-hypoallergenic.svg);
    mask-image: url(../../includes/images/icon-hypoallergenic.svg);
}

.pmp-detail-profile-result-intake-type::before {
    -webkit-mask-image: url(../../includes/images/icon-intake-type.svg);
    mask-image: url(../../includes/images/icon-intake-type.svg);
}

.pmp-detail-profile-result-juvenile::before {
    -webkit-mask-image: url(../../includes/images/icon-juvenile.svg);
    mask-image: url(../../includes/images/icon-juvenile.svg);
}

.pmp-detail-profile-result-kennel-location::before {
    -webkit-mask-image: url(../../includes/images/icon-kennel-location.svg);
    mask-image: url(../../includes/images/icon-kennel-location.svg);
}

.pmp-detail-profile-result-kitten::before {
    -webkit-mask-image: url(../../includes/images/icon-kitten.svg);
    mask-image: url(../../includes/images/icon-kitten.svg);
}

.pmp-detail-profile-result-long-address::before {
    -webkit-mask-image: url(../../includes/images/icon-long-address.svg);
    mask-image: url(../../includes/images/icon-long-address.svg);
}

.pmp-detail-profile-result-los::before {
    -webkit-mask-image: url(../../includes/images/icon-los.svg);
    mask-image: url(../../includes/images/icon-los.svg);
}

.pmp-detail-profile-result-lost::before {
    -webkit-mask-image: url(../../includes/images/icon-lost.svg);
    mask-image: url(../../includes/images/icon-lost.svg);
}

.pmp-detail-profile-result-microchipped::before {
    -webkit-mask-image: url(../../includes/images/icon-microchipped.svg);
    mask-image: url(../../includes/images/icon-microchipped.svg);
}

.pmp-detail-profile-result-mouse::before {
    -webkit-mask-image: url(../../includes/images/icon-mouse.svg);
    mask-image: url(../../includes/images/icon-mouse.svg);
}

.pmp-detail-profile-result-mule::before {
    -webkit-mask-image: url(../../includes/images/icon-mule.svg);
    mask-image: url(../../includes/images/icon-mule.svg);
}

.pmp-detail-profile-result-not-defined::before {
    -webkit-mask-image: url(../../includes/images/icon-not-defined.svg);
    mask-image: url(../../includes/images/icon-not-defined.svg);
}

.pmp-detail-profile-result-ok-cats::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-cats.svg);
    mask-image: url(../../includes/images/icon-ok-cats.svg);
}

.pmp-detail-profile-result-ok-cats-not::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-cats-not.svg);
    mask-image: url(../../includes/images/icon-ok-cats-not.svg);
}

.pmp-detail-profile-result-ok-dogs::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-dogs.svg);
    mask-image: url(../../includes/images/icon-ok-dogs.svg);
}

.pmp-detail-profile-result-ok-dogs-not::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-dogs-not.svg);
    mask-image: url(../../includes/images/icon-ok-dogs-not.svg);
}

.pmp-detail-profile-result-ok-kids::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-kids.svg);
    mask-image: url(../../includes/images/icon-ok-kids.svg);
}

.pmp-detail-profile-result-ok-kids-not::before {
    -webkit-mask-image: url(../../includes/images/icon-ok-kids-not.svg);
    mask-image: url(../../includes/images/icon-ok-kids-not.svg);
}

.pmp-detail-profile-result-onhold::before {
    -webkit-mask-image: url(../../includes/images/icon-onhold.svg);
    mask-image: url(../../includes/images/icon-onhold.svg);
}

.pmp-detail-profile-result-outcome-date::before {
    -webkit-mask-image: url(../../includes/images/icon-outcome-date.svg);
    mask-image: url(../../includes/images/icon-outcome-date.svg);
}

.pmp-detail-profile-result-pig::before {
    -webkit-mask-image: url(../../includes/images/icon-pig.svg);
    mask-image: url(../../includes/images/icon-pig.svg);
}

.pmp-detail-profile-result-preferred::before {
    -webkit-mask-image: url(../../includes/images/icon-preferred.svg);
    mask-image: url(../../includes/images/icon-preferred.svg);
}

.pmp-detail-profile-result-puppy::before {
    -webkit-mask-image: url(../../includes/images/icon-puppy.svg);
    mask-image: url(../../includes/images/icon-puppy.svg);
}

.pmp-detail-profile-result-racoon::before {
    -webkit-mask-image: url(../../includes/images/icon-racoon.svg);
    mask-image: url(../../includes/images/icon-racoon.svg);
}

.pmp-detail-profile-result-requires-fence::before {
    -webkit-mask-image: url(../../includes/images/icon-requires-fence.svg);
    mask-image: url(../../includes/images/icon-requires-fence.svg);
}

.pmp-detail-profile-result-requires-yard::before {
    -webkit-mask-image: url(../../includes/images/icon-requires-yard.svg);
    mask-image: url(../../includes/images/icon-requires-yard.svg);
}

.pmp-detail-profile-result-senior::before {
    -webkit-mask-image: url(../../includes/images/icon-senior.svg);
    mask-image: url(../../includes/images/icon-senior.svg);
}

.pmp-detail-profile-result-sheep::before {
    -webkit-mask-image: url(../../includes/images/icon-sheep.svg);
    mask-image: url(../../includes/images/icon-sheep.svg);
}

.pmp-detail-profile-result-shelter-id::before {
    -webkit-mask-image: url(../../includes/images/icon-shelter-id.svg);
    mask-image: url(../../includes/images/icon-shelter-id.svg);
}

.pmp-detail-profile-result-snake::before {
    -webkit-mask-image: url(../../includes/images/icon-snake.svg);
    mask-image: url(../../includes/images/icon-snake.svg);
}

.pmp-detail-profile-result-special-diet::before {
    -webkit-mask-image: url(../../includes/images/icon-special-diet.svg);
    mask-image: url(../../includes/images/icon-special-diet.svg);
}

.pmp-detail-profile-result-special-needs::before {
    -webkit-mask-image: url(../../includes/images/icon-special-needs.svg);
    mask-image: url(../../includes/images/icon-special-needs.svg);
}

.pmp-detail-profile-result-squirrel::before {
    -webkit-mask-image: url(../../includes/images/icon-squirrel.svg);
    mask-image: url(../../includes/images/icon-squirrel.svg);
}

.pmp-detail-profile-result-state::before {
    -webkit-mask-image: url(../../includes/images/icon-state.svg);
    mask-image: url(../../includes/images/icon-state.svg);
}

.pmp-detail-profile-result-tortoise::before {
    -webkit-mask-image: url(../../includes/images/icon-tortoise.svg);
    mask-image: url(../../includes/images/icon-tortoise.svg);
}

.pmp-detail-profile-result-turtle::before {
    -webkit-mask-image: url(../../includes/images/icon-turtle.svg);
    mask-image: url(../../includes/images/icon-turtle.svg);
}

.pmp-detail-profile-result-type::before {
    -webkit-mask-image: url(../../includes/images/icon-type.svg);
    mask-image: url(../../includes/images/icon-type.svg);
}

.pmp-detail-profile-result-unweaned::before {
    -webkit-mask-image: url(../../includes/images/icon-unweaned.svg);
    mask-image: url(../../includes/images/icon-unweaned.svg);
}

.pmp-detail-profile-result-unweaned-bottle::before {
    -webkit-mask-image: url(../../includes/images/icon-unweaned-bottle.svg);
    mask-image: url(../../includes/images/icon-unweaned-bottle.svg);
}

.pmp-detail-profile-result-unweaned-gruel::before {
    -webkit-mask-image: url(../../includes/images/icon-unweaned-gruel.svg);
    mask-image: url(../../includes/images/icon-unweaned-gruel.svg);
}

.pmp-detail-profile-result-unweaned-with-mom::before {
    -webkit-mask-image: url(../../includes/images/icon-unweaned-with-mom.svg);
    mask-image: url(../../includes/images/icon-unweaned-with-mom.svg);
}

.pmp-detail-profile-result-video::before {
    -webkit-mask-image: url(../../includes/images/icon-video.svg);
    mask-image: url(../../includes/images/icon-video.svg);
}

.pmp-detail-profile-result-wolf::before {
    -webkit-mask-image: url(../../includes/images/icon-wolf.svg);
    mask-image: url(../../includes/images/icon-wolf.svg);
}

.pmp-detail-profile-result-yard::before {
    -webkit-mask-image: url(../../includes/images/icon-yard.svg);
    mask-image: url(../../includes/images/icon-yard.svg);
}

.pmp-detail-profile-result-young::before {
    -webkit-mask-image: url(../../includes/images/icon-young.svg);
    mask-image: url(../../includes/images/icon-young.svg);
}

.pmp-detail-profile-result-young-adult::before {
    -webkit-mask-image: url(../../includes/images/icon-young-adult.svg);
    mask-image: url(../../includes/images/icon-young-adult.svg);
}

.pmp-detail-profile-result-zip::before {
    -webkit-mask-image: url(../../includes/images/icon-zip.svg);
    mask-image: url(../../includes/images/icon-zip.svg);
}


.pmp-details-profile-results li:after {
    content: "";
    width: 100%;
    height: 1px;
    bottom: -15px;
    display: block;
    position: absolute;
    background: #D6D5D6;
    left: 0;
}

/* Remove border from last row of results (2-column grid) */
.pmp-details-profile-results li:last-child::after,
.pmp-details-profile-results li:nth-last-child(2):nth-child(odd)::after {
    display: none;
}
    
/* Description */
.pmp-detail-profile-description-value {
    border-radius: 50px;
    padding: 49px;
    border: 1px solid #D6D5D6;
    color: var(--pmp-color-body, #333);
    margin: 30px 0 30px 0;
    line-height: 1.6;
}

/* Conversion buttons wrapper */
.pmp-details-profile-conversion-buttons-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.pmp-details-profile-conversion-buttons-wrapper .pmp-details-conversion-buttons {
    display: contents;
}

/* Profile buttons base style - navy with coral hover */
.pmp-details-profile-button {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    border: 1px solid var(--pmp-color-primary, #024463);
    color: #FFF;
    transition: 0.4s;
    padding: 15px 60px 15px 20px;
    background: var(--pmp-color-primary, #024463) url(../../includes/images/icon-arrow-1.png) no-repeat 95% 50% / 50px 50px;
    cursor: pointer;
    font: 700 18px / 24px CenturyGothic, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
}

.pmp-details-profile-button:hover {
    background-color: var(--pmp-color-widget, #F26959);
    border-color: var(--pmp-color-widget, #F26959);
    color: #FFF;
}

/* Return button — reverse colors with arrow-2 icon */
.pmp-details-profile-button-return {
    background: var(--pmp-color-widget, #F26959) url(../../includes/images/icon-arrow-2.png) no-repeat 95% 50% / 50px 50px;
    border-color: var(--pmp-color-widget, #F26959);
}

.pmp-details-profile-button-return:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
}

/* Other buttons wrapper */
.pmp-details-profile-other-button {
    margin-top: 15px;
}

/* Profile responsive */
@media (max-width: 992px) {
    .pmp-details-profile-slider-wrapper {
        flex: 0 0 45%;
        max-width: 45%;
    }
}

@media (max-width: 768px) {
    .pmp-details-profile-content {
        flex-direction: column;
    }
    
    .pmp-details-profile-slider-wrapper {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .pmp-details-profile-results {
        grid-template-columns: 1fr;
    }
    
    .pmp-details-profile-conversion-buttons-wrapper,
    .pmp-details-profile-other-button {
        max-width: 100%;
    }
}

/**
 * PetMatchPro Poster Template Styles
 * Modern poster template for printable adoption/found/lost posters
 * Aligned with detail template class hierarchy
 * 
 * @package PetMatchPro
 * @version 7.1.0
 */

/* ============================================================================
   BASE POSTER STRUCTURE
   ========================================================================== */

.pmp-poster-container {
    max-width: 8.5in;
    margin: 0 auto;
    padding: 1rem;
    background: white;
}

/* ============================================================================
   POSTER HEADING SECTION
   ========================================================================== */

.pmp-poster-heading {
    text-align: center;
    margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--pmp-color-primary, #024463);
    padding-bottom: 1rem;
}

.pmp-poster-title-primary {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--pmp-color-primary, #024463);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    line-height: 1.2;
}

.pmp-poster-title-secondary {
    font-size: 1.5rem;
    color: var(--pmp-color-body, #333);
    margin: 0;
    font-weight: 400;
    line-height: 1.3;
}

/* ============================================================================
   POSTER CONTENT SECTION (Media + Details)
   ========================================================================== */

.pmp-poster-content {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: flex-start;
}

/* Media Section (Left Column) */
.pmp-poster-media {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pmp-poster-image-primary {
    width: 100%;
    border: 3px solid var(--pmp-color-primary, #024463);
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.pmp-poster-image-primary img {
    width: 100%;
    height: auto;
    display: block;
}

/* Details Section (Right Column) */
.pmp-poster-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pmp-poster-field {
    display: flex;
    gap: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.4;
}

.pmp-poster-label {
    font-weight: 700;
    color: var(--pmp-color-primary, #024463);
    flex-shrink: 0;
}

.pmp-poster-value {
    color: var(--pmp-color-body, #333);
    flex: 1;
}

/* ============================================================================
   POSTER DESCRIPTION SECTION
   ========================================================================== */

.pmp-poster-description {
    clear: both;
    width: 100%;
    margin: 1.5rem 0;
    padding: 1rem 0;
}

.pmp-poster-description-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--pmp-color-heading, #222);
    margin-bottom: 0.75rem;
}

.pmp-poster-description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pmp-color-body, #333);
}

/* ============================================================================
   POSTER FOOTER SECTION (Thumbnails + QR Code)
   ========================================================================== */

.pmp-poster-footer {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

/* Thumbnail Photos */
.pmp-poster-thumbnails {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pmp-poster-thumbnail {
    width: 200px;
    flex-shrink: 0;
    border: 3px solid var(--pmp-color-primary, #024463);
    border-radius: 4px;
    overflow: hidden;
}

.pmp-poster-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* QR Code */
.pmp-poster-qr {
    width: 200px;
    flex-shrink: 0;
    text-align: center;
}

.pmp-poster-qr-image {
    border: 2px solid #ccc;
    padding: 5px;
    background: white;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.pmp-poster-qr-image img {
    width: 150px;
    height: 150px;
    display: block;
}

.pmp-poster-qr-text {
    font-size: 0.9rem;
    color: var(--pmp-color-primary, #024463);
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================================================
   POSTER CALL TO ACTION SECTION
   ========================================================================== */

.pmp-poster-cta {
    text-align: center;
    padding: 1.5rem;
    margin: 1rem 0 0 0;
    background: transparent;
}

.pmp-poster-cta-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #004279;
}

.pmp-poster-cta-text p {
    margin: 0.5rem 0;
}

.pmp-poster-cta-highlight {
    font-weight: 700;
}

.pmp-poster-cta-large {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ============================================================================
   RESPONSIVE - SCREEN VIEW
   ========================================================================== */

@media (max-width: 768px) {
    .pmp-poster-content {
        flex-direction: column;
    }
    
    .pmp-poster-media {
        flex: 1 1 auto;
    }
    
    .pmp-poster-title-primary {
        font-size: 2rem;
    }
    
    .pmp-poster-title-secondary {
        font-size: 1.25rem;
    }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    @page {
        size: 8.5in 11in;
        margin: 0.15in !important;
    }
    
    * {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    
    html {
        margin: 0 !important;
        padding: 0 !important;
        width: 8.5in !important;
        height: 11in !important;
    }
    
    body {
        margin: 0.15in !important;
        padding: 0 !important;
        width: 8.2in !important;
        height: 10.7in !important;
        max-height: 10.7in !important;
        overflow: hidden !important;
    }
    
    /* Hide WordPress elements */
    header:not(.pmp-poster-heading), 
    footer:not(.pmp-poster-cta), 
    nav, aside, 
    .site-header, 
    .site-footer, 
    .breadcrumbs, 
    .navigation, 
    #wpadminbar,
    .no-print,
    .entry-title,
    .page-title,
    .et_pb_title_container,
    .page-header,
    .post-title,
    .wp-block-post-title,
    .site-branding,
    .entry-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Remove spacing from container elements */
    .site,
    .site-content,
    .entry-content,
    #content,
    main,
    article,
    .content-area,
    #primary,
    .et_pb_section,
    .et_pb_row,
    .wp-block-group,
    .wp-block-post-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Poster container sizing - force to fit */
    .pmp-template-poster {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 10.7in !important;
        margin: 0 !important;
        padding: 0 !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
        overflow: visible !important;
    }
    
    .pmp-poster-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        max-height: 10.7in !important;
        overflow: hidden !important;
        page-break-after: avoid !important;
        page-break-inside: avoid !important;
    }
    
    /* Heading - 25% larger fonts */
    .pmp-poster-heading {
        margin: 0 0 0.08in 0 !important;
        padding: 0 0 0.06in 0 !important;
        border-bottom-width: 2px !important;
        page-break-after: avoid !important;
    }
    
    .pmp-poster-title-primary {
        font-size: 1.75rem !important;
        margin: 0 0 0.04in 0 !important;
        line-height: 1 !important;
    }
    
    .pmp-poster-title-secondary {
        font-size: 1.25rem !important;
        margin: 0 !important;
        line-height: 1 !important;
    }
    
    /* Content - force side by side */
    .pmp-poster-content {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.18in !important;
        margin: 0.06in 0 !important;
        align-items: flex-start !important;
        page-break-inside: avoid !important;
    }
    
    /* Media - fixed width */
    .pmp-poster-media {
        flex: 0 0 2.6in !important;
        max-width: 2.6in !important;
        width: 2.6in !important;
    }
    
    .pmp-poster-image-primary {
        width: 100% !important;
        max-width: 2.6in !important;
        height: 3in !important;
        border-width: 2px !important;
        margin: 0 !important;
    }
    
    .pmp-poster-image-primary img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    
    /* Details - 25% larger fonts */
    .pmp-poster-details {
        flex: 1 !important;
        min-width: 0 !important;
        gap: 0.03in !important;
    }
    
    .pmp-poster-field {
        font-size: 0.9rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
        gap: 0.15rem !important;
    }
    
    .pmp-poster-label,
    .pmp-poster-value {
        font-size: 0.9rem !important;
    }
    
    /* Description - 25% larger fonts, reduced lines */
    .pmp-poster-description {
        margin: 0.05in 0 !important;
        padding: 0 !important;
        page-break-inside: avoid !important;
    }
    
    .pmp-poster-description-label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.05in !important;
    }
    
    .pmp-poster-description-text {
        font-size: 0.775rem !important;
        line-height: 1.08 !important;
        max-height: calc(0.775rem * 1.08 * 8) !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 8 !important;
        -webkit-box-orient: vertical !important;
        text-overflow: ellipsis !important;
    }
    
    /* Footer - thumbnails and QR */
    .pmp-poster-footer {
        margin: 0.05in 0 0 0 !important;
        gap: 0.1in !important;
        align-items: flex-start !important;
        page-break-inside: avoid !important;
    }
    
    .pmp-poster-thumbnail {
        width: 1.3in !important;
        max-width: 1.3in !important;
        height: 1.85in !important;
        border-width: 2px !important;
    }
    
    .pmp-poster-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        display: block !important;
    }
    
    .pmp-poster-qr {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    
    .pmp-poster-qr-image {
        border-width: 1px !important;
        padding: 2px !important;
    }
    
    .pmp-poster-qr-image img {
        width: 1.05in !important;
        height: 1.05in !important;
        display: block !important;
    }
    
    .pmp-poster-qr-text {
        font-size: 0.65rem !important;
        margin-top: 0.02in !important;
        line-height: 1.1 !important;
    }
    
    /* Call to action - 25% larger fonts */
    .pmp-poster-cta {
        padding: 0.05in 0 0 0 !important;
        margin: 0 !important;
        page-break-inside: avoid !important;
    }
    
    .pmp-poster-cta-text {
        font-size: 0.775rem !important;
        line-height: 1.15 !important;
    }
    
    .pmp-poster-cta-text p {
        margin: 0.015in 0 !important;
    }
    
    .pmp-poster-cta-large {
        font-size: 1rem !important;
    }
    
    /* Absolutely prevent page breaks */
    .pmp-poster-heading,
    .pmp-poster-content,
    .pmp-poster-description,
    .pmp-poster-footer,
    .pmp-poster-cta {
        page-break-inside: avoid !important;
        page-break-after: avoid !important;
    }
    
    /* Hide everything after poster */
    .pmp-poster-container ~ * {
        display: none !important;
    }
}

/* ============================================================================
   RESCUEGROUPS DETAIL TEMPLATE STYLES
   Template: adopt-cpa.php (RescueGroups CPA layout)
   Replaces inline styles with class-based styling
   ========================================================================== */

/* -----------------------------------------------------------------------
   RG Detail Template - Base Structure
   ----------------------------------------------------------------------- */

/* Main wrapper */
#pmp-details-wrapper-adoptRescueGroups,
.pmp-details-wrapper {
    max-width: 95%;
    margin: 0 auto;
    padding: 20px;
}

/* Title wrapper - flex layout for back button and title */
.pmp-details-title-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.pmp-details-left-col {
    flex: 1 1 auto;
}

.pmp-details-right-col {
    flex: 0 0 auto;
}

/* RG Detail title */
.pmp-adoptRescueGroups-details-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--pmp-color-primary, #024463);
    margin: 0;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Dividers (replaces inline border-color)
   ----------------------------------------------------------------------- */

.pmp-divider {
    border-style: solid;
    border-width: 1px 0 0 0;
    margin: 1rem 0;
}

.pmp-divider-primary {
    border-color: #66A436;
}

.pmp-divider-secondary {
    border-color: #ccc;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Utility Classes (replaces inline styles)
   ----------------------------------------------------------------------- */

.pmp-clear {
    clear: both;
}

.pmp-full-width {
    width: 100%;
}

.pmp-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Media Section
   ----------------------------------------------------------------------- */

.pmp-details-media {
    margin-bottom: 1.5rem;
}

.pmp-detail-image {
    margin-bottom: 1rem;
}

.pmp-detail-image img#expandedImg {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Thumbnails container */
.pmp-details-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pmp-imgThumb {
    flex: 0 0 auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.pmp-imgThumb:hover {
    transform: scale(1.05);
}

.pmp-imgThumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #e5e5e5;
}

.pmp-imgThumb img:hover {
    border-color: #66A436;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Video Play Icon
   ----------------------------------------------------------------------- */

.pmp-detail-video-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    position: relative;
    text-decoration: none;
}

.pmp-detail-video-play-icon::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    mask-image: url(../../includes/images/video-play.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../../includes/images/video-play.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.pmp-detail-video-play-icon::after {
    display: none;
}

.pmp-detail-video-play-icon:hover {
    background-color: rgba(0, 0, 0, 0.85);
}

/* -----------------------------------------------------------------------
   RG Detail Template - Results/Fields Section
   ----------------------------------------------------------------------- */

#pmp-details-results-wrapper-adoptRescueGroups,
.pmp-details-results-wrapper {
    margin-bottom: 1.5rem;
}

/* Detail field rows */
.pmp-detail-result {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.pmp-detail-result:last-child {
    border-bottom: none;
}

/* Detail labels */
.pmp-detail-label {
    flex: 0 0 40%;
    min-width: 120px;
    font-weight: 600;
    color: #2c5aa0;
}

/* Detail values */
.pmp-detail-value {
    flex: 1 1 60%;
    color: var(--pmp-color-body, #333);
}

/* -----------------------------------------------------------------------
   RG Detail Template - Description Section
   ----------------------------------------------------------------------- */

.pmp-detail-description-wrapper {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 4px;
}

.pmp-detail-dsc-value {
    line-height: 1.6;
    color: #444;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Buttons
   ----------------------------------------------------------------------- */

.pmp-details-buttons-wrapper {
    margin: 1.5rem 0;
}

#pmp-details-conversion-buttons-adoptRescueGroups,
.pmp-details-conversion-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.pmp-detail-conversion-button {
    flex: 0 0 auto;
}

.pmp-detail-application {
    text-align: center;
}

.pmp-detail-other-button {
    margin: 0.5rem 0;
}

.pmp-detail-search-return {
    margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Features & Social Share
   ----------------------------------------------------------------------- */

.pmp-details-features-wrapper {
    margin: 1rem 0;
}

.pmp-details-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.pmp-details-feature-wrapper {
    margin: 1.5rem 0;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 4px;
}

.pmp-social-share-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--pmp-color-body, #333);
    text-align: center;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Icons
   ----------------------------------------------------------------------- */

.pmp-animal-icon {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
    justify-content: center;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Sponsor Section
   ----------------------------------------------------------------------- */

.pmp-sponsor-wrapper {
    margin: 0;
    text-align: center;
}

.pmp-sponsor-wrapper a {
    display: inline-block;
}

.pmp-sponsor-image {
    display: inline-block;
}

.pmp-sponsor-image img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Notices & Errors
   ----------------------------------------------------------------------- */

.pmp-error {
    color: #d32f2f;
}

.pmp-error-message {
    padding: 1rem;
    background: #ffebee;
    border: 1px solid #ffcdd2;
    border-radius: 4px;
    color: #c62828;
}

.pmp-notice {
    padding: 1rem;
    border-radius: 4px;
    margin: 1rem 0;
}

.pmp-notice-warning {
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    color: #e65100;
}

.pmp-notice-upgrade-license {
    padding: 0.5rem 1rem;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: 4px;
    color: #e65100;
    font-size: 0.9rem;
    display: inline-block;
}

/* -----------------------------------------------------------------------
   RG Detail Template - Responsive
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {
    .pmp-details-title-wrapper {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .pmp-detail-label,
    .pmp-detail-value {
        flex: 1 1 100%;
    }

    .pmp-detail-label {
        margin-bottom: 0.25rem;
    }

    .pmp-imgThumb img {
        width: 60px;
        height: 60px;
    }

    .pmp-detail-video-play-icon {
        width: 60px;
        height: 60px;
    }

    .pmp-adoptRescueGroups-details-title {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   CPA DETAIL TEMPLATE (RescueGroups)
   Template: adopt-cpa.php
   Layout: Header above, two-column (media left, content right),
           full-width description/buttons below
   ========================================================================== */

/* -----------------------------------------------------------------------------
   CPA Header (Outside Container)
   ----------------------------------------------------------------------------- */

/* CPA Header with title and button side by side, border below both */
.pmp-details-header.pmp-template-cpa {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    position: relative;
}

.pmp-details-header.pmp-template-cpa .pmp-details-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Border line at bottom of header, inherits title color */
.pmp-details-header.pmp-template-cpa .pmp-details-title::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid currentColor;
}

/* CPA Field layout - column alignment, no borders */
.pmp-template-cpa .pmp-details-fields {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
}

.pmp-details-container.pmp-template-cpa .pmp-details-field {
    display: table-row;
    border: 0;
    border-bottom: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    outline: none;
}

.pmp-details-container.pmp-template-cpa .pmp-details-field:last-child {
    border: 0;
    border-bottom: 0;
}

.pmp-details-container.pmp-template-cpa .pmp-details-field-label {
    display: table-cell;
    font-size: 150%;
    width: 40%;
    padding: 1px 15px 1px 0;
    vertical-align: middle;
    text-align: right;
    line-height: 1.2;
    border: 0;
    border-bottom: 0;
    background: transparent;
}

.pmp-details-container.pmp-template-cpa .pmp-details-field-value {
    display: table-cell;
    font-size: 110%;
    padding: 4px 0 1px 0;
    vertical-align: middle;
    line-height: 1.2;
    border: 0;
    border-bottom: 0;
    background: transparent;
}

/* Currency symbol now handled by PHP formatCurrencyValue() */

/* -----------------------------------------------------------------------------
   CPA Container
   ----------------------------------------------------------------------------- */

.pmp-details-container.pmp-template-cpa {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 100%;
}

/* -----------------------------------------------------------------------------
   CPA Media Section (Left Column)
   ----------------------------------------------------------------------------- */

.pmp-template-cpa .pmp-details-media {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 450px;
    margin-bottom: 0;
}

/* Media row - main image + thumbnails side by side */
.pmp-template-cpa .pmp-details-media-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

/* Media main - main image + video player stacked */
.pmp-template-cpa .pmp-details-media-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
    max-width: 350px;
}

/* Media column - thumbnails + videos stacked */
.pmp-template-cpa .pmp-details-media-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pmp-template-cpa .pmp-details-image-main {
    width: 100%;
}

.pmp-template-cpa .pmp-details-image-main img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Thumbnails - Vertical strip */
.pmp-template-cpa .pmp-details-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
    width: 60px;
}

.pmp-template-cpa .pmp-details-thumbnail {
    width: 60px;
    height: 60px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.pmp-template-cpa .pmp-details-thumbnail:hover,
.pmp-template-cpa .pmp-details-thumbnail.active {
    border-color: currentColor;
}

.pmp-template-cpa .pmp-details-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Videos - Below thumbnails in column */
.pmp-template-cpa .pmp-details-videos {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pmp-template-cpa .pmp-details-video {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    border-radius: 4px;
    cursor: pointer;
}

/* Video play icon - anchor inside video div */
.pmp-template-cpa .pmp-details-video a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    background: rgba(0, 0, 0, 0.5);
}

.pmp-template-cpa .pmp-details-video a::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    mask-image: url(../../includes/images/video-play.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url(../../includes/images/video-play.svg);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.pmp-template-cpa .pmp-details-video a::after {
    display: none;
}

.pmp-template-cpa .pmp-details-video:hover {
    background-color: var(--pmp-color-body, #333);
}

/* Print Poster Button - below media row */
.pmp-template-cpa .pmp-details-poster-print {
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.pmp-template-cpa .pmp-details-poster-print .pmp-button {
    display: block;
    width: 100%;
    max-width: 350px;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}

.pmp-template-cpa .pmp-details-poster-print .pmp-button:hover {
    text-decoration: none;
}

/* -----------------------------------------------------------------------------
   CPA Content Section (Right Column)
   ----------------------------------------------------------------------------- */

.pmp-template-cpa .pmp-details-content {
    flex: 1 1 400px;
    min-width: 300px;
}

/* Social Share */
.pmp-template-cpa .pmp-details-social-share {
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.pmp-template-cpa .pmp-details-social-share-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.pmp-template-cpa .pmp-details-social-share-icons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pmp-template-cpa .pmp-details-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: opacity 0.2s ease;
}

.pmp-template-cpa .pmp-details-social-icon:hover {
    opacity: 0.8;
}

.pmp-template-cpa .pmp-details-social-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* -----------------------------------------------------------------------------
   CPA Full-Width Elements
   ----------------------------------------------------------------------------- */

.pmp-template-cpa .pmp-divider {
    flex: 0 0 100%;
    width: 100%;
    border: none;
    border-top: 1px solid #ddd;
    margin: 0.5rem 0;
}

.pmp-template-cpa .pmp-divider-primary {
    border-top-width: 2px;
}

/* Description */
.pmp-template-cpa .pmp-details-description {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0.5rem;
}

.pmp-template-cpa .pmp-details-description-label {
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.pmp-template-cpa .pmp-details-description-value {
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Other Buttons (Adoption App) */
.pmp-template-cpa .pmp-details-buttons-other {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0;
    text-align: center;
}

.pmp-template-cpa .pmp-details-buttons-other a,
.pmp-template-cpa .pmp-details-button-other {
    display: inline-block;
    max-width: 400px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
}

.pmp-template-cpa .pmp-details-buttons-other a:hover,
.pmp-template-cpa .pmp-details-button-other:hover {
    text-decoration: none;
}

/* Centered wrapper for buttons */
.pmp-template-cpa .pmp-details-buttons-wrapper {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
}

/* Sponsorship */
.pmp-template-cpa .pmp-details-sponsorship,
.pmp-template-cpa .pmp-sponsor-wrapper {
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.pmp-template-cpa .pmp-sponsor-wrapper a {
    display: inline-block;
}

.pmp-template-cpa .pmp-details-sponsorship img {
    max-width: 200px;
    height: auto;
}

/* -----------------------------------------------------------------------------
   CPA Responsive
   ----------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .pmp-details-header.pmp-template-cpa {
        flex-direction: column;
        align-items: flex-start;
    }

    .pmp-template-cpa .pmp-details-media {
        max-width: 100%;
    }
    
    .pmp-template-cpa .pmp-details-media-row {
        flex-direction: column;
    }

    .pmp-template-cpa .pmp-details-image-main {
        max-width: 100%;
    }

    .pmp-template-cpa .pmp-details-media-column {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pmp-template-cpa .pmp-details-thumbnails {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
    }

    .pmp-template-cpa .pmp-details-videos {
        flex-direction: row;
    }

    .pmp-template-cpa .pmp-details-content {
        flex: 0 0 100%;
    }

    .pmp-template-cpa .pmp-details-fields {
        display: block;
    }

    .pmp-template-cpa .pmp-details-field {
        display: block;
        margin-bottom: 0.5rem;
        border: none;
        border-bottom: none;
    }

    .pmp-template-cpa .pmp-details-field-label {
        display: block;
        text-align: left;
        padding-right: 0;
        margin-bottom: 0.25rem;
        width: 100%;
        border: none;
    }

    .pmp-template-cpa .pmp-details-field-value {
        display: block;
        border: none;
    }
    
    .pmp-template-cpa .pmp-details-poster-print .pmp-button {
        max-width: 100%;
    }
}

/* ============================================================================
   LOST & FOUND METHOD-SPECIFIC STYLES
   ========================================================================== */

/* Found banner - green to indicate pet has been found */
.pmp-search-result-container.found .pmp-search-result-banner {
    background-color: #4CAF50;
}

/* Lost banner - red to indicate pet is missing */
.pmp-search-result-container.lost .pmp-search-result-banner {
    background-color: #f44336;
}

/* ============================================================================
   SEARCH RESULT ICONS
   ========================================================================== */

.pmp-search-result-icons {
    display: flex;
    justify-content: center;
    border: none;
    padding-top: 5px;
    margin-top: 5px;
}

.pmp-search-result-icons img,
.pmp-search-result-icons span {
    border: none;
    width: 30px;
}
/* ============================================================================
   VIDEO MODAL
   ========================================================================== */

.pmp-video-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.pmp-video-modal-overlay.active {
    display: flex;
}

.pmp-video-modal-content {
    position: relative;
    width: 90%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
}

.pmp-video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.pmp-video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px 10px;
}

.pmp-video-modal-close:hover {
    color: #ccc;
}
/* ============================================================================
   TEMPLATE: structured
   Horizontal sort buttons with accent/status styling
   ============================================================================ */

/* Sort Buttons Container */
.pmp-sort-buttons-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pmp-sort-label {
    font-weight: 600;
    color: var(--pmp-color-body, #333);
    font-size: 1.1rem;
}

.pmp-sort-label-buttons {
    margin-left: auto;
}

/* Filter Dropdowns */
.pmp-filter-dropdowns {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex: 1;
}

.pmp-filter-dropdown {
    display: inline-block;
}

.pmp-filter-select {
    padding: 0.5rem 2rem 0.5rem 1rem;
    border: 1px solid var(--pmp-color-primary, #024463);
    border-radius: 20px;
    background-color: #fff;
    color: var(--pmp-color-body, #333);
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23024463' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 120px;
}

.pmp-filter-select:focus {
    outline: none;
    border-color: var(--pmp-color-cta, #F38D81);
    box-shadow: 0 0 0 2px rgba(243, 141, 129, 0.2);
}

.pmp-filter-select:hover {
    border-color: var(--pmp-color-cta, #F38D81);
}

/* Button Consistency — filter dropdowns styled like sort buttons */
.pmp-filter-select.pmp-filter-select-consistent {
    background-color: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-primary, #024463);
    border-radius: 20px;
    color: var(--pmp-color-body, #333);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 2rem 0.5rem 1.25rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    min-width: 120px;
}

.pmp-filter-select.pmp-filter-select-consistent:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.pmp-filter-select.pmp-filter-select-consistent:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(2, 68, 99, 0.2);
}

/* Active state — a filter value is selected */
.pmp-filter-select.pmp-filter-select-consistent-active {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-cta, #F38D81);
    color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFFFFF' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

/* Consistent option text needs dark color inside the dropdown panel */
.pmp-filter-select.pmp-filter-select-consistent option {
    background-color: #fff;
    color: #333;
}

.pmp-sort-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Sort Button Base - styled like search submit button */
a.pmp-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--pmp-color-cta, #F38D81);
    border: 1px solid var(--pmp-color-cta, #F38D81);
    border-radius: 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
}

a.pmp-sort-button:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
    color: #FFFFFF;
    text-decoration: none;
}

/* Active Sort Button */
a.pmp-sort-button-active {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
    color: #FFFFFF;
}

a.pmp-sort-button-active:hover {
    background-color: var(--pmp-color-primary, #024463);
    border-color: var(--pmp-color-primary, #024463);
    color: #FFFFFF;
}

/* Override theme link underlines on sort buttons */
.pmp-template-structured a.pmp-sort-button,
.pmp-template-structured a.pmp-sort-button:hover,
.pmp-template-structured a.pmp-sort-button:focus,
.pmp-template-structured a.pmp-sort-button:visited,
.pmp-template-structured a.pmp-sort-button-active,
.pmp-template-structured a.pmp-sort-button-active:hover,
.pmp-template-universal-default-client a.pmp-sort-button,
.pmp-template-universal-default-client a.pmp-sort-button:hover,
.pmp-template-universal-default-client a.pmp-sort-button:focus,
.pmp-template-universal-default-client a.pmp-sort-button:visited,
.pmp-template-universal-default-client a.pmp-sort-button-active,
.pmp-template-universal-default-client a.pmp-sort-button-active:hover,
.pmp-template-filter-widget-client a.pmp-sort-button,
.pmp-template-filter-widget-client a.pmp-sort-button:hover,
.pmp-template-filter-widget-client a.pmp-sort-button:focus,
.pmp-template-filter-widget-client a.pmp-sort-button:visited,
.pmp-template-filter-widget-client a.pmp-sort-button-active,
.pmp-template-filter-widget-client a.pmp-sort-button-active:hover,
.pmp-template-adopt-default-client a.pmp-sort-button,
.pmp-template-adopt-default-client a.pmp-sort-button:hover,
.pmp-template-adopt-default-client a.pmp-sort-button:focus,
.pmp-template-adopt-default-client a.pmp-sort-button:visited,
.pmp-template-adopt-default-client a.pmp-sort-button-active,
.pmp-template-adopt-default-client a.pmp-sort-button-active:hover,
.pmp-template-found-default-client a.pmp-sort-button,
.pmp-template-found-default-client a.pmp-sort-button:hover,
.pmp-template-found-default-client a.pmp-sort-button:focus,
.pmp-template-found-default-client a.pmp-sort-button:visited,
.pmp-template-found-default-client a.pmp-sort-button-active,
.pmp-template-found-default-client a.pmp-sort-button-active:hover,
.pmp-template-lost-default-client a.pmp-sort-button,
.pmp-template-lost-default-client a.pmp-sort-button:hover,
.pmp-template-lost-default-client a.pmp-sort-button:focus,
.pmp-template-lost-default-client a.pmp-sort-button:visited,
.pmp-template-lost-default-client a.pmp-sort-button-active,
.pmp-template-lost-default-client a.pmp-sort-button-active:hover,
.pmp-template-featured-default-client a.pmp-sort-button,
.pmp-template-featured-default-client a.pmp-sort-button:hover,
.pmp-template-featured-default-client a.pmp-sort-button:focus,
.pmp-template-featured-default-client a.pmp-sort-button:visited,
.pmp-template-featured-default-client a.pmp-sort-button-active,
.pmp-template-featured-default-client a.pmp-sort-button-active:hover {
    text-decoration: none;
}

/* Sort Icon (CSS triangles) */
.pmp-sort-icon {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.25rem;
}

.pmp-sort-icon-asc {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid currentColor;
}

.pmp-sort-icon-desc {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
}

/* Template Container Identifier */
.pmp-template-structured {
    /* Container-level styles if needed */
}

/* Card: Accent Field (1st non-name field - typically gender/breed) */
.pmp-template-structured .pmp-search-result-detail-accent {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 3px solid var(--pmp-color-search-result-accent, #c41230);
}

/* Card: Status Button (last field) */
.pmp-template-structured .pmp-search-result-detail-status {
    margin-top: 0.75rem;
}

.pmp-search-result-status-button {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background-color: var(--pmp-color-search-result-status-background, #28a745);
    color: var(--pmp-color-search-result-status-text, #fff);
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Override card hover for this template */
.pmp-template-structured.pmp-search-result-container {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pmp-template-structured.pmp-search-result-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Name link styling for this template */
.pmp-template-structured .pmp-search-result-name-link {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pmp-color-primary, #024463);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
}

.pmp-template-structured .pmp-search-result-name-link:hover {
    color: var(--pmp-color-cta, #F38D81);
}

/* Responsive: Sort buttons */
@media (max-width: 600px) {
    .pmp-sort-buttons-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .pmp-sort-buttons {
        width: 100%;
    }
    
    .pmp-sort-button {
        flex: 1;
        justify-content: center;
        min-width: 80px;
    }
}

/* ============================================================================
   DETAIL TEMPLATE: details-navigation
   Companion to search-structured templates
   ============================================================================ */

/* Detail Card - generic card styling for detail templates */
.pmp-detail-card {
    background-color: #fff;
    border: 1px solid transparent;
}

/* Main Container */
.pmp-details-container.pmp-template-details-navigation {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    flex-direction: column;
}

/* Detail Pager - template specific */
.pmp-template-details-navigation .pmp-detail-pager {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
    margin-bottom: 0;
}

/* Mobile navigation - 3 row layout */
@media (max-width: 600px) {
    .pmp-template-details-navigation .pmp-detail-pager {
        flex-wrap: wrap !important;
        gap: 0.5rem;
        justify-content: center !important;
    }
    
    /* Override inline-block to allow flex ordering */
    .pmp-template-details-navigation .pmp-detail-pager > div {
        display: block !important;
    }
    
    /* Row 1: First and Previous */
    .pmp-template-details-navigation .pmp-detail-pager .pmp-pager-first {
        order: 1;
    }
    
    .pmp-template-details-navigation .pmp-detail-pager .pmp-pager-prev {
        order: 2;
    }
    
    /* Row 2: Animal count - full width, centered */
    .pmp-template-details-navigation .pmp-detail-pager .pmp-pageNumbers {
        order: 3;
        flex: 0 0 100%;
        text-align: center;
    }
    
    /* Row 3: Next and Last */
    .pmp-template-details-navigation .pmp-detail-pager .pmp-pager-next {
        order: 4;
    }
    
    .pmp-template-details-navigation .pmp-detail-pager .pmp-pager-last {
        order: 5;
    }
}

/* Prev/Next Navigation */
.pmp-detail-prev-next-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    width: 100%;
}

.pmp-detail-nav-prev,
.pmp-detail-nav-next {
    display: inline-flex;
}

.pmp-detail-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 2px solid var(--pmp-color-stat-box, #4EAAB7);
    border-radius: 4px;
    color: var(--pmp-color-body, #333);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pmp-detail-nav-button:hover {
    background-color: var(--pmp-color-stat-box, #4EAAB7);
    color: #fff;
    text-decoration: none;
}

.pmp-detail-nav-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.pmp-detail-nav-text {
    font-size: 0.9rem;
}

/* Two-Column Layout */
.pmp-details-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    background-color: #f0f7f9;
    border-radius: 8px;
    padding: 1.5rem;
}

/* Media Column */
.pmp-details-media-column {
    display: flex;
    flex-direction: column;
}

.pmp-template-details-navigation .pmp-details-image-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pmp-template-details-navigation .pmp-details-image-main {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.pmp-template-details-navigation .pmp-details-image-main img:not(.pmp-detail-special-needs-overlay):not(.pmp-overlay) {
    width: 100%;
    height: auto;
    display: block;
}

.pmp-template-details-navigation .pmp-detail-special-needs-overlay,
.pmp-template-details-navigation .pmp-details-image-main .pmp-overlay {
    width: 50px;
    max-width: 50px;
}

.pmp-template-details-navigation .pmp-details-thumbnails {
    display: contents;
}

.pmp-template-details-navigation .pmp-details-thumbnail {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.pmp-template-details-navigation .pmp-details-thumbnail:hover {
    border-color: var(--pmp-color-stat-box, #4EAAB7);
}

.pmp-template-details-navigation .pmp-details-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Thumbs row - flex container for thumbnails and videos inline */
.pmp-template-details-navigation .pmp-details-thumbs-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
}

/* Videos container - flatten into parent flex */
.pmp-template-details-navigation .pmp-details-videos {
    display: contents;
}

/* Video thumbnail - same size as photo thumbnails */
.pmp-template-details-navigation .pmp-details-video {
    width: 90px;
    height: 90px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmp-template-details-navigation .pmp-details-video:hover {
    border-color: var(--pmp-color-stat-box, #4EAAB7);
}

.pmp-template-details-navigation .pmp-details-video a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Info Column */
.pmp-details-info-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Header Section */
.pmp-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.pmp-details-header-info {
    flex: 1;
}

.pmp-details-header-buttons {
    flex-shrink: 0;
}

/* Quick Fields - layout for inline label/value display */
.pmp-detail-quick-fields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pmp-detail-quick-field {
    font-size: var(--pmp-font-size-detail-quick, 0.95rem);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

.pmp-detail-quick-field-accent .pmp-detail-name {
    font-size: 2rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

/* Override base flex for inline display in quick/title fields */
.pmp-detail-quick-field .pmp-details-field-label,
.pmp-detail-title-field .pmp-details-field-label {
    flex: none;
    min-width: auto;
}

.pmp-detail-quick-field .pmp-details-field-value,
.pmp-detail-title-field .pmp-details-field-value {
    flex: none;
}

/* Buttons Column */
.pmp-detail-buttons-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Icon Button Style (SafeHaven-inspired) - layout only, colors from admin settings */
.pmp-detail-icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem 0.625rem 0.625rem !important;
    border: 1px solid transparent;
    border-radius: 25px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #fff;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    min-width: 220px;
    text-align: left;
}

.pmp-details-container .pmp-detail-icon-button,
.pmp-details-container .pmp-detail-icon-button:hover,
.pmp-details-container .pmp-detail-icon-button:focus,
.pmp-details-container .pmp-detail-icon-button:visited {
    color: #fff;
    text-decoration: none;
}

.pmp-detail-icon-button svg {
    flex-shrink: 0;
    stroke: currentColor;
}

.pmp-detail-icon-button span {
    flex: 1;
    text-align: left;
}

/* Icon wrapper - inverse colors from button (admin settings override these) */
.pmp-detail-icon-button .pmp-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Default: uses hover background (will be overridden by admin settings) */
    background-color: #004d00;
    color: #fff;
}

.pmp-detail-icon-button:hover .pmp-button-icon {
    /* On hover: uses normal background (will be overridden by admin settings) */
    background-color: #006400;
}

.pmp-detail-icon-button .pmp-button-icon svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    stroke: currentColor;
}

/* Horizontal Action Buttons - Navigation Detail Template */
/* Style other and conversion buttons to match return button (icon-button style) */
.pmp-template-details-navigation .pmp-detail-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pmp-template-details-navigation .pmp-detail-action-buttons .pmp-details-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem 0.625rem 0.625rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    flex: 0 0 calc(47% - 0.25rem);
    box-sizing: border-box;
}

/* Title Section - layout for inline label/value display */
.pmp-detail-section-title {
    font-size: var(--pmp-font-size-detail-heading, 1.25rem);
    font-weight: 700;
    margin: 1rem 0 0.5rem 0;
    padding: 0;
}

.pmp-detail-title-fields {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.pmp-detail-title-field {
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

/* Description */
.pmp-template-details-navigation .pmp-details-description {
    margin: 0.5rem 0 1rem 0;
}

.pmp-template-details-navigation .pmp-details-description-label {
    display: none;
}

.pmp-template-details-navigation .pmp-details-description-value {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pmp-color-body, #333);
}

/* Instructions Section */
.pmp-details-instructions {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--pmp-color-instruction-background, #4EAAB7);
    border: 1px solid var(--pmp-color-instruction-border, #4EAAB7);
    border-radius: 4px;
}

.pmp-details-instructions-label {
    font-size: var(--pmp-font-size-detail-instruction-title, 0.85rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--pmp-color-instruction-title, #024463);
    margin-bottom: 0.5rem;
}

.pmp-details-instructions-value {
    font-size: var(--pmp-font-size-detail-instruction-text, 0.9rem);
    line-height: 1.5;
    color: var(--pmp-color-instruction-text, #333);
}

.pmp-details-instructions-value p {
    margin: 0 0 0.5rem 0;
}

.pmp-details-instructions-value p:last-child {
    margin-bottom: 0;
}

/* Stats Section */
.pmp-details-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Stats Row (3-column boxes) */
.pmp-detail-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pmp-detail-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background-color: var(--pmp-color-stat-box, #4EAAB7);
    border: 1px solid transparent;
}

.pmp-detail-stat-box-label,
.pmp-detail-stat-box .pmp-detail-stat-label {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.pmp-detail-stat-box-value,
.pmp-detail-stat-box .pmp-detail-stat-value {
    font-size: var(--pmp-font-size-detail-stat, 1rem);
    font-weight: 700;
}

/* Stats Full (full-width bars) */
.pmp-detail-stats-full {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pmp-detail-stat-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background-color: var(--pmp-color-stat-box, #4EAAB7);
    border: 1px solid transparent;
}

.pmp-detail-stat-bar-label,
.pmp-detail-stat-bar .pmp-detail-stat-label {
    font-size: 0.8rem;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.pmp-detail-stat-bar-value,
.pmp-detail-stat-bar .pmp-detail-stat-value {
    font-size: 1rem;
    font-weight: 700;
}

/* Icons */
.pmp-template-details-navigation .pmp-details-icons {
    margin-top: 1.5rem;
}

/* Social Share - below thumbnails */
.pmp-template-details-navigation .pmp-details-social-share {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.pmp-template-details-navigation .pmp-details-social-share-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pmp-color-body, #333);
    margin-bottom: 0.5rem;
}

.pmp-template-details-navigation .pmp-details-social-share-icons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Media column */
.pmp-template-details-navigation .pmp-details-media-column {
    display: flex;
    flex-direction: column;
}

/* Image row */
.pmp-template-details-navigation .pmp-details-image-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.pmp-template-details-navigation .pmp-details-image-main {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.pmp-template-details-navigation .pmp-details-image-main img:not(.pmp-detail-special-needs-overlay):not(.pmp-overlay) {
    width: 100%;
    height: auto;
    display: block;
}

/* Footer */
.pmp-details-footer {
    margin-top: 1.5rem;
    text-align: center;
}

/* Responsive: Detail Template */
@media (max-width: 768px) {
    .pmp-details-layout {
        grid-template-columns: 1fr;
    }
    
    .pmp-details-header {
        flex-direction: column;
    }
    
    .pmp-details-header-buttons {
        width: 100%;
    }
    
    .pmp-detail-buttons-column {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .pmp-detail-conversion-buttons,
    .pmp-detail-other-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .pmp-detail-prev-next-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pmp-detail-nav-prev,
    .pmp-detail-nav-next {
        text-align: center;
    }
    
    .pmp-detail-stats-row {
        flex-wrap: wrap;
    }
    
    .pmp-detail-stat-box {
        flex: 1 1 40%;
    }
}

/* Small mobile - stack action buttons */
@media (max-width: 480px) {
    .pmp-template-details-navigation .pmp-detail-action-buttons .pmp-details-button {
        flex: 0 0 100%;
    }
}
/* =============================================================================
   CELEBRATION PAGE
   ============================================================================= */

.pmp-celebration-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px 20px;
    gap: 16px;
}

.pmp-celebration-photo {
    position: relative !important;
    transform: translate(0, 0);
    display: block;
    border-radius: 12px;
    overflow: hidden;
    max-width: 480px;
    width: 100%;
    line-height: 0;
    margin: 0 auto;
}

.pmp-celebration-photo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.pmp-celebration-photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-sizing: border-box;
    padding: 20px;
}

.pmp-celebration-found-text {
    color: #fff;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.pmp-celebration-header h2.pmp-celebration-headline {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--pmp-color-heading, #282828);
}

.pmp-celebration-header .pmp-celebration-subheadline {
    font-size: 1rem;
    margin: 0;
    color: #555;
    max-width: 560px;
}

.pmp-celebration-results {
    margin-bottom: 60px !important;
    padding-bottom: 20px;
}

.pmp-celebration-similar-count {
    margin-bottom: 20px;
}

/* ============================================================================
   COMPACT TEMPLATE
   Optimized for sidebars, footers, and narrow containers
   @since 7.8.0
   ========================================================================== */

/* Container — single column stack, capped width for sidebar use */
.pmp-search-results-container.pmp-template-compact .pmp-search-results {
    grid-template-columns: 1fr;
    max-width: 380px;
    gap: 1rem;
}

/* Card — edge-to-edge, subtle shadow instead of border */
.pmp-search-result-container.pmp-template-compact {
    border-radius: 10px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pmp-search-result-container.pmp-template-compact:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Photo — 4:3 aspect ratio for wider crop in narrow spaces */
.pmp-search-result-photo.pmp-template-compact {
    position: relative;
    overflow: hidden;
}

.pmp-search-result-image.pmp-template-compact {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
    width: 100%;
    display: block;
}

/* Name overlay — gradient scrim at photo bottom */
.pmp-search-result-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 0.75rem 0.6rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Details — compact inline with tight padding */
.pmp-search-result-details.pmp-template-compact {
    padding: 0.5rem 0.75rem 0.25rem;
}

.pmp-template-compact .pmp-search-result-values-inline {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
    text-align: center;
}

/* Labels mode — tighter for compact */
.pmp-template-compact .pmp-search-result-field {
    padding: 0.15rem 0;
    font-size: 0.85rem;
}

.pmp-template-compact .pmp-search-result-label {
    font-size: 0.8rem;
    color: #777;
}

/* CTA button — full-width, prominent */
.pmp-search-cta-buttons.pmp-template-compact {
    padding: 0.25rem 0.75rem 0.75rem;
    margin-top: auto;
}

.pmp-search-cta-button.pmp-template-compact {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.6rem 1rem;
    background-color: var(--pmp-color-cta, #F38D81);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.15s;
    box-sizing: border-box;
}

.pmp-search-cta-button.pmp-template-compact:hover {
    background-color: var(--pmp-color-cta-hover, #e07a6e);
    transform: scale(1.02);
    color: #fff;
    text-decoration: none;
}

/* Title section */
.pmp-results-title.pmp-template-compact {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    padding-bottom: 0.75rem;
    margin-bottom: 0;
    text-align: center;
}

/* Banner — compact sizing */
.pmp-template-compact .pmp-search-result-banner {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
}

/* Icons section — compact spacing */
.pmp-template-compact .pmp-icons-container {
    padding: 0.25rem 0.75rem;
    justify-content: center;
}

/* Overlay icons — slightly smaller in compact */
.pmp-template-compact .pmp-overlay {
    width: 32px;
    height: 32px;
}

/* Center the grid when container is wider than max-width (e.g. count="1" in main content) */
.pmp-search-results-container.pmp-template-compact {
    display: flex;
    justify-content: center;
}

/* Wider placements — allow 2-col ONLY with explicit grid-2 and enough room */
@media (min-width: 600px) {
    .pmp-search-results-container.pmp-template-compact .pmp-search-results.grid-2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: 780px;
    }
}
/* ============================================================================
   CAROUSEL TEMPLATE
   Horizontal scroll-snap layout for homepage hero sections and full-width areas
   @since 7.8.0
   ========================================================================== */

/* Wrapper — position context for nav arrows */
.pmp-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 0 0 1rem;
}

/* Track — horizontal scroll with snap */
.pmp-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1rem 1rem;
    /* Hide scrollbar across browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pmp-carousel-track::-webkit-scrollbar {
    display: none;
}

/* Card — fixed width snap child */
.pmp-template-carousel.pmp-search-result-container {
    flex: 0 0 240px;
    scroll-snap-align: start;
    border-radius: 10px;
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.pmp-template-carousel.pmp-search-result-container:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Photo — square 1:1 aspect ratio */
.pmp-search-result-photo.pmp-template-carousel {
    position: relative;
    overflow: hidden;
}

.pmp-search-result-image.pmp-template-carousel {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    display: block;
}

/* Card body — groups name + details + CTA below photo */
.pmp-carousel-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5rem 0.75rem 0.75rem;
}

/* Name — matches search template styling */
.pmp-search-result-name.pmp-template-carousel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    text-align: center;
    margin-bottom: 0.5rem;
    display: block;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmp-search-result-name.pmp-template-carousel a {
    color: var(--pmp-color-heading, #282828);
    text-decoration: none;
}

.pmp-search-result-name.pmp-template-carousel a:hover {
    color: var(--pmp-color-cta, #F38D81);
}

/* Details — centered inline */
.pmp-search-result-details.pmp-template-carousel {
    padding: 0 0 0.35rem;
}

.pmp-template-carousel .pmp-search-result-values-inline {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Labels mode in carousel */
.pmp-template-carousel .pmp-search-result-field {
    padding: 0.1rem 0;
    font-size: 0.8rem;
}

.pmp-template-carousel .pmp-search-result-label {
    font-size: 0.75rem;
    color: #777;
}

/* CTA button — full-width within card */
.pmp-search-cta-buttons.pmp-template-carousel {
    margin-top: auto;
    padding: 0.35rem 0 0;
}

a.pmp-button.pmp-search-cta-button.pmp-template-carousel {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--pmp-color-cta, #F38D81);
    color: #fff;
    border: 1px solid var(--pmp-color-cta, #F38D81);
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, transform 0.15s;
    box-sizing: border-box;
}

a.pmp-button.pmp-search-cta-button.pmp-template-carousel:hover {
    background-color: var(--pmp-color-cta-hover, #e07a6e);
    transform: scale(1.02);
    color: #fff;
    text-decoration: none;
}

/* Navigation arrows */
.pmp-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, background-color 0.2s;
}

.pmp-carousel-nav:hover {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.pmp-carousel-nav-prev {
    left: 4px;
}

.pmp-carousel-nav-next {
    right: 4px;
}

.pmp-carousel-nav-icon {
    font-size: 1.3rem;
    line-height: 1;
    color: #333;
    font-weight: 700;
}

.pmp-carousel-nav-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Title section */
.pmp-results-title.pmp-template-carousel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--pmp-color-heading, #282828);
    padding: 0 1rem 0.5rem;
    margin-bottom: 0;
}

/* Banner — carousel sizing */
.pmp-template-carousel .pmp-search-result-banner {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
}

/* Icons section — tight for carousel */
.pmp-template-carousel .pmp-icons-container {
    padding: 0.15rem 0;
    justify-content: center;
}

/* Overlay icons — smaller in carousel cards */
.pmp-template-carousel .pmp-overlay {
    width: 28px;
    height: 28px;
}

/* Placeholder for missing photos */
.pmp-search-result-image-placeholder {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: #999;
    font-size: 0.85rem;
}

/* Responsive — wider cards on bigger screens */
@media (min-width: 480px) {
    .pmp-template-carousel.pmp-search-result-container {
        flex: 0 0 260px;
    }
}

@media (min-width: 768px) {
    .pmp-template-carousel.pmp-search-result-container {
        flex: 0 0 280px;
    }

    .pmp-carousel-nav {
        width: 40px;
        height: 40px;
    }

    .pmp-carousel-nav-icon {
        font-size: 1.5rem;
    }
}

/* Touch devices — hide nav arrows, swipe is native */
@media (hover: none) and (pointer: coarse) {
    .pmp-carousel-nav {
        display: none;
    }
}