:root{
    --topbar-height: 74px;
    --footer-height: 60px;
    --primary:#BD1E51;
    --secondary:#F1B814;
    --text:#707070;
    --dark:#121212;
    --white:#ffffff;
    --card:#ececec;
    --border:#E9E9E9;
    --muted:#9A9A9A;
    --action:#26BCC2;
    --viewall:#425654;
    --pet-title: #425654;
    --box-bg: #F5F5F5;
    --box-border: #E2E2E2;
    --shadow:0 4px 4px rgba(0,0,0,.15);
    --pb-font:'Google Sans', Arial, Helvetica, sans-serif;
}

*{
    box-sizing:border-box;
}

html, body{
    margin:0;
    padding:0;
    height:100%;
    font-family:'Google Sans', Arial, Helvetica, sans-serif;
    background:var(--dark);
    color:var(--text);
    scrollbar-width:none;
    -ms-overflow-style:none;
    overflow-x:hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
    display:none;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

h3{
    font-size:18px;
    letter-spacing:-0.5px;
}

h2{
    font-size:22px;
    letter-spacing:-0.5px;
    color:var(--primary);
}

h1{
    font-size:28px;
    letter-spacing:-0.5px;
    color:var(--primary);
}
p{
    font-size:14px;
    line-height:1.3;
    color:var(--text);
}

.desktop-shell{
    position:relative;
    width:100%;
    min-height:100vh;
    background:var(--dark);
    overflow-x:hidden;
}

.desktop-shell::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("../patterns/pb-pattern.png") center center repeat;
    background-size:480px;
    opacity:0.35;
    pointer-events:none;
    z-index:0;
}

.sidebar{
    display:none;
}

.menu-item{
    display:flex;
    align-items:center;
    gap:20px;
    color:#ffffff;
    font-weight:400;
    font-size:15px;
}

.menu-item:hover{
    opacity:0.8;
}

.menu-icon{
    width:20px;
    height:20px;
    object-fit:contain;
}

.menu-icon:hover{
    font-weight:600;
}

.app-shell{
    width:100%;
    max-width:520px;
    margin:0 auto;
    min-height:100dvh;
    height:100dvh;
    position:relative;
    background:var(--white);
    scrollbar-width:none;
    -ms-overflow-style:none;
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior-y:contain;
    padding-bottom:calc(var(--footer-height) + 20px);
    scroll-margin-top:74px;
}

.app-shell::-webkit-scrollbar{
    display:none;
}

.home-page .section,
.home-page .post-card{
    scroll-snap-align:start;
    scroll-snap-stop:normal;
    scroll-margin-top:84px;
}

.topbar{
    position:sticky;
    top:0;
    z-index:80;
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    min-height:74px;
    padding-left:16px;
    background:var(--primary);
    color:var(--white);
}

.topbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;        /* vertical center */
    height: 100%;
    font-weight: 600;
}

@media screen and (max-width: 419px) {
    .topbar-center{
        left: 45%;
    }
}

.topbar-center__link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.topbar-center__link:hover, .topbar-center__link:active {
    color: var(--secondary);
}

.topbar__logo-wrap{
    display:flex;
    align-items:center;
    padding:12px 0;
}

.topbar__logo-image{
    height:40px;
    width:auto;
    object-fit:contain;
}

.topbar__actions{
    display:flex;
    align-items:stretch;
    margin-left:auto;
}

.topbar__link{
    display:flex;
    align-items:center;
    padding:0 24px 0 0;
    font-size:14px;
    font-weight:400;
    color:var(--white);
}

.menu-button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:74px;
    height:74px;
    min-width:74px;
    min-height:74px;
    padding:0;
    flex:0 0 74px;
    border:0;
    background:var(--secondary);
    color:var(--dark);
    font-size:24px;
    cursor:pointer;
}

.featured-post__image{
    position:relative;
    width:100%;
    height:520px;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    box-shadow:none;
    overflow:hidden;
    display:block;
    background:transparent;
    appearance:none;
    -webkit-appearance:none;
    border-radius:0;
    cursor:pointer;
}

.featured-post__open{
    position:absolute;
    right:10px;
    bottom:10px;
    padding:6px 8px;
    border-radius:6px;
    background:var(--action);
    color:#fff;
    font-size:14px;
}

.featured-post__open:hover{
    background:var(--pet-title);
}

.featured-bud-card .featured-post__open{
    position:absolute;
    right:20px;
    bottom:10px;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    min-width:28px;
    padding:0;
    border-radius:8px;
    line-height:1;
    font-size:14px;
    font-weight:700;
    text-indent:0;
}

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.65);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:9998;
}

.mobile-menu{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    width:75%;
    max-width:none;
    padding:20px 18px 28px 60px;
    overflow-y:auto;
    background:#121212;
    color:#ffffff;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:9999;
}

.mobile-menu.is-open{
    transform:translateX(0);
}

.mobile-menu-overlay.is-open{
    opacity:1;
    visibility:visible;
}

.mobile-menu__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:44px;
}

.mobile-menu__logo{
    max-width:80px;
    height:auto;
}

.mobile-menu__close{
    padding:0;
    border:0;
    background:transparent;
    color:#ffffff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.mobile-menu__nav{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mobile-menu-item{
    color:#E5E5E5;
    font-weight:400;
    font-size:15px;
}

body.menu-open{
    overflow:hidden;
}

.section{
    padding: 10px 20px;
}

.section__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin-bottom:4px;
}

.section__head h2{
    margin:0;
    color:var(--primary);
    font-size:22px;
    font-weight:700;
    line-height:1;
    letter-spacing:0.5px;
    font-family:'Google Sans', Arial, sans-serif;
}

.section-my-buds{
    background-color: var(--box-bg);
}

.owner-profile-pets-section {
    background-color: var(--box-bg);
}

.view-all-link{
    color:var(--viewall);
    font-size:12px;
    line-height:3;
    font-weight:400;
    font-family:'Google Sans', Arial, sans-serif;
}

.view-all-link:hover{
    color:var(--primary);
    font-weight:600;
}

/*===============================
        STORIES SECTION
================================*/
.section-stories{
    background: var(--box-bg);
}

.stories-slider{ 
    position:relative;
}

.stories-row{
    display:flex;
    align-items:flex-start;
    gap:5px;
    overflow-x:auto;
    padding:0 0 4px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.stories-row::-webkit-scrollbar{
    display:none;
}

.stories-nav{
    position:absolute;
    top:45px;
    transform:translateY(-50%);
    z-index:5;
    width:32px;
    height:32px;
    border-radius:50%;
    border:0;
    background:rgba(0,0,0,0.25);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    line-height:0;
    font-size:22px;
}

.stories-nav--prev{
    left:-10px;
}

.stories-nav--next{
    right:-10px;
}

.story-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:90px;
    min-width:90px;
    padding:0;
    border:0;
    background:transparent;
    overflow:visible;
    flex-shrink:0;
    scroll-snap-align:start;
    cursor:pointer;
}

.story-card:hover{
    transform:scale(1.04);
}

.story-card--placeholder{
    cursor:default;
}

.stories-divider{
    width:1px;
    height:82px;
    margin:4px 0 0;
    flex-shrink:0;
    background:#e5e7eb;
}

.story-avatar{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:90px;
    height:90px;
    border-radius:50%;
    background:#e5e7eb;
}

.story-avatar::before{
    content:"";
    position:absolute;
    inset:2px;
    background:#fff;
    border-radius:50%;
}

.story-avatar--live,
.story-avatar--self-live{
    background:linear-gradient(135deg, var(--primary), var(--secondary));
}

.story-avatar--placeholder{
    background:#e5e7eb;
}

.story-avatar--placeholder::before{
    background:#f3f4f6;
}

.story-avatar--self-live span{
    position:relative;
    z-index:2;
    font-size:12px;
    color:#6b7280;
    font-weight:600;
}

.story-avatar-img{
    position:relative;
    z-index:2;
    width:82px;
    height:82px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.story-name{
    width:100%;
    margin-top:8px;
    color:#4f5b66;
    font-size:12px;
    font-weight:400;
    line-height:1.2;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.featured-post{
    margin-left:-20px;
    margin-right:-20px;
    padding:0;
    overflow:hidden;
    background:var(--white);
    box-shadow:none;
    border:0;
}

.featured-post__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.featured-post .icon-row{
    padding:20px;
}

.featured-post .pet-meta{
    padding:0 20px 20px;
}

.featured-post-text{
    padding:0 20px 20px;
}

.featured-bud-excerpt{
    display:-webkit-box;
    line-clamp:2;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4;
    max-height:calc(1.4em * 2);
    color:#707070;
}

.featured-bud-more{
    margin-left:4px;
    font-weight:600;
    color:#426654;
}

/* =========================
   NEW BUDS SLIDER
========================= */

.featured-bud-slider {
    position: relative;
}

.featured-bud-track {
    position: relative;
}

.featured-bud-slide {
    display: none;
}

.featured-bud-slide.is-active {
    display: block;
}

/* NEW BUDS CARD MEDIA ONLY */
.featured-bud-card .featured-post__image{
    width:100%;
    height:620px;
    min-height:620px;
    max-height:620px;
    margin:0;
    padding:0;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:hidden;
    background:transparent;
    line-height:0;
}

.featured-bud-card button.featured-post__image{
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    cursor:pointer;
}

.featured-bud-card .featured-post__img,
.featured-bud-card .featured-post__video{
    width:100%;
    height:100%;
    min-height:620px;
    max-height:620px;
    display:block;
    object-fit:cover;
    object-position:center center;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent;
}

/* NAV BUTTONS */
.featured-bud-nav {
    position: absolute;
    top: 260px;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
    font-size: 22px;
}

/* move closer to the hero edges */
.featured-bud-nav--prev {
    left: -10px;
}

.featured-bud-nav--next {
    right: -10px;
}

.featured-bud-slider.is-loading .featured-bud-nav{
    opacity:.7;
    pointer-events:none;
}

/*================================ 
HERO LINKS
================================*/
.hero-owner-link {
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 4;
    font-family: var(--pb-font);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.hero-owner-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.hero-owner-link:active {
    color: #26BCC2;
}

.hero-owner-link:focus-visible {
    outline: 2px solid #26BCC2;
    outline-offset: 2px;
    border-radius: 4px;
}

/*====================================
MY BUDS 
======================================*/
.my-buds-slider{
    position:relative;
}

.my-buds-slider--static .buds-row{
    overflow:visible;
    justify-content:flex-start;
    gap:8px;
    padding:0;
    scroll-snap-type:none;
}

.my-buds-slider--static .buds-card{
    flex:0 0 90px;
}

.my-buds-view-all{
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}

.buds-row{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:0 0px 4px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
}

.buds-row::-webkit-scrollbar{
    display:none;
}

.my-buds-nav{
    position:absolute;
    top:45px;
    transform:translateY(-50%);
    z-index:5;
    width:32px;
    height:32px;
    border-radius:50%;
    border:0;
    background:rgba(0,0,0,0.25);
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    line-height:0;
    font-size:22px;
}

.my-buds-nav[hidden],
.my-buds-view-all[hidden],
#myBudsSection[hidden]{
    display:none !important;
}

.my-buds-nav--prev{
    left:-10px;
}

.my-buds-nav--next{
    right:-10px;
}

.buds-card{
    flex:0 0 auto;
    width:90px;
    text-decoration:none;
    color:inherit;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    scroll-snap-align:start;
}

.buds-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;
    background:#e9e9e9;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid transparent;
    transition:all .2s ease;
}

.buds-card:hover .buds-avatar{
    border-color:var(--primary);
}

.buds-card.is-active .buds-avatar{
    border-color:var(--primary);
}

.buds-avatar__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.buds-avatar__placeholder{
    font-weight:700;
    font-size:20px;
    color:#707070;
}

.buds-name{
    margin-top:8px;
    font-size:14px;
    line-height:1.2;
    font-weight:700;
    color:#4f5b66;
    text-align:center;
    width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.featured-post__image + .pet-meta.featured-meta{
    margin-top:20px;
}

.pet-meta.featured-meta + .post-card__body-link{
    display:block;
    margin-top:14px;
}

.placeholder-image{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:linear-gradient(135deg, #e8e8e8, #d6d6d6);
    color:#7d7d7d;
    font-size:14px;
    font-weight:700;
}

.icon-row{
    display:flex;
    align-items:center;
    padding:10px 16px 10px;
}

.icon-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--action);
    cursor:pointer;
}

.icon-btn--like{
    width: 28px;
    height:28px;
    color:var(--action);
    margin: 0px -4px 0 0;
}

.icon-btn--like.is-active{
    color:var(--primary);
}

.icon-btn--more{
    height:24px;
    font-size:24px;
}

.icon-btn--bookmark .icon-svg{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
}

.icon-btn--bookmark.is-saved .icon-svg{
    fill:currentColor;
    stroke:currentColor;
}

.icon-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    transition:opacity 0.2s ease;
}

.icon-btn svg,
.icon-btn .icon-svg{
    pointer-events:none;
    width:20px;
    height:20px;
    display:block;
}

.icon-outline{
    opacity:1;
    pointer-events:none;
}

.icon-filled{
    opacity:0;
    pointer-events:none;
}

.icon-btn.is-active .icon-outline{
    opacity:0;
}

.icon-btn.is-active .icon-filled{
    opacity:1;
}

.icon-count{
    font-size:12px;
    line-height:1;
    margin:-6px 0 0 -6px;
}

.action-icon{
    color:var(--action);
}

.like-icon{
    width:25px;
    height:25px;
    color:var(--primary);
}

.bookmark-icon.active{
    content:url("../icons/actions/bookmark-filled.svg");
}

.post-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-top:-12px;
}

.post-actions__left{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.post-actions__right{
    display:flex;
    align-items:center;
    margin-left:auto;
}

.post-action{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.post-action--like,
.post-action--comment{
    gap:5px !important;
}

.pet-profile-page .post-action--like .icon-count,
.pet-profile-page .post-action--comment .icon-count{
    margin:-6px 0 0 0;
}

.pet-profile-page .post-action--like,
.pet-profile-page .post-action--comment{
    gap:5px !important;
}

.pet-meta{
    display:grid;
    grid-template-columns:52px 1fr auto;
    gap:40px;
    align-items:end;
    padding:0 16px 16px;
}

.featured-meta{
    padding-bottom:18px;
}

.pet-avatar{
    width:82px !important;
    height:82px !important;
    border-radius:50%;
    overflow:hidden;
}

.pet-avatar__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.add-pet-hero{
    align-items:center;
    text-align:center;
    gap:12px;
}

.placeholder-avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:#d9d9d9;
    color:#666;
    font-size:12px;
    font-weight:700;
}

.pet-meta-title{
    margin-bottom:4px;
    color:var(--pet-title)!important;
    font-size:16px !important;
    font-style: italic;
    font-weight:700;
    letter-spacing:0;
}

.pet-meta-title span{
    font-size:12px;
    font-style:italic;
    font-weight:400;
}

.pet-meta-bold{
    color:var(--text);
    font-size:14px;
    font-weight:500;
    letter-spacing:0.5px;
}

.pet-meta__text strong{
    display:block;
    margin-bottom:4px;
    color:var(--text);
    font-size:14px;
    font-weight:400;
    letter-spacing:0.5px;
}

.pet-meta__text div{
    color:var(--text);
    font-size:14px;
    line-height:1.2;
}

.pet-meta__text--stacked div{
    display:block;
}

.follow-btn{
    font-family: var(--pb-font);
    align-self:end;
    padding:8px 12px;
    border:1px solid var(--pet-title);
    border-radius:20px 20px 20px 0;
    color:var(--pet-title);
    background-color:transparent;
    font-size:13px;
    font-weight:600;
    letter-spacing:0;
    cursor:pointer;
}

.change-password-btn {
    background-color: var(--muted)!important;
}
.change-password-btn:hover {
    background-color: var(--text)!important;
    color: var(--white);
}

.follow-btn:hover{
    background-color:var(--pet-title);
    color:var(--white);
}

.follow-btn-white{
    border-color:var(--white);
    color:var(--white);
}

.section .post-card{
    padding:0 !important;
}

.post-card{
    max-width:500px;
    margin:0 auto 36px;
    padding:0 !important;
    overflow:hidden;
    border-radius:8px;
    border:1px solid var(--box-border);
    background:var(--box-bg);
}

.post-card:hover{
    transform:translateY(-3px);
    transition:0.2s ease;
}

.post-card__image{
    width:100%;
    height:280px;
}

.post-card__img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.post-card__title{
    margin:0;
    padding:0 16px 8px;
    color:#333;
    font-size:14px;
    font-weight:500;
    letter-spacing:0.5px;
}

.post-card__desc{
    margin:0;
    padding:0 16px 18px;
    color:var(--text);
    font-size:14px;
    font-weight:400;
    line-height:1.2;
    letter-spacing:0.5px;
}

.post-card__body{
    padding:0 20px 0px;
    margin-top:-16px;
}

.post-card__body h3{
    color:var(--pet-title);
    font-size:14px;
    font-weight:700;
}

.post-card__body p{
    margin-top:-10px;
    color:var(--text);
    font-size:14px;
    font-weight:400;
    line-height:1.4;
}

.post-card .featured-post__image{
    margin:0;
}

.post-card .featured-post__img{
    width:100%;
    display:block;
}

.featured-post__img,
.featured-post__video,
.featured-post__image video,
.featured-post__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    border:0;
    outline:0;
    box-shadow:none;
    background:transparent;
}

/*=========================
   POST DETAIL CARD
==========================*/
.post-card .icon-row{
    padding:20px;
}

.post-card__bio{
    padding:0 20px 20px;
}

.post-card__bio-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.post-card__avatar{
    flex:0 0 auto;
}

.post-card__follow-btn{
    margin-left:auto;
    align-self:center;
}

.post-card__bio-lines{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.post-card__pet-name{
    margin-bottom:4px;
}

.post-card__pet-name a{
    color:inherit;
    text-decoration:none;
}

.post-card__meta-line{
    color:var(--text);
    font-size:14px;
    line-height:1;
}

.post-card__content-link{
    display:block;
    margin-top:8px;
    color:inherit;
    text-decoration:none;
}

.post-card__post-title{
    margin:2px 0 6px;
    color:var(--pet-title);
    font-size:18px;
    font-weight:600;
    line-height:1;
}

.post-card__post-copy{
    color:var(--text);
    font-size:14px;
    font-weight:400;
    line-height:1.4;
}

.post-viewer-trigger{
    display:block;
    width:100%;
    padding:0;
    border:0;
    background:transparent;
    text-align:inherit;
    cursor:pointer;
}

.post-detail-card{
    padding:0 !important;
    overflow:hidden;
}

.post-detail-card .post-detail-media,
.post-detail-card .post-detail-gallery{
    margin:0;
    padding:0;
}

.post-detail-card .featured-post__image,
.post-detail-card .post-viewer-trigger{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
}

.post-detail-card .featured-post__img{
    display:block;
    width:100%;
    margin:0;
}

.post-detail-card .icon-row{
    padding:20px 20px 0;
}

.post-detail-card .pet-meta{
    padding:20px;
}

.post-detail-card .post-card__body{
    padding:0 20px 20px;
}

div.profile-card.post-detail-card{
    border-radius: 8px;
}

.post-card__view-post{
    font-weight:700;
    color:var(--active) !important;
}

.post-detail-image-grid {
    padding: 20px;
}

.post-detail-edit-hero{
    position:absolute;
    right:20px;
    bottom:20px;
    z-index:5;
    color: white;
}

.post-detail-edit-hero > .add-hover:hover {
    color: var(--primary)!important;
}
.post-link{
    display:block;
    color:inherit;
    text-decoration:none;
}

.post-back-btn{
    padding:10px 0;
    border:none;
    background:none;
    color:#000;
    font-size:14px;
    cursor:pointer;
}

.post-detail-media{
    position:relative;
}

.post-close-btn{
    position:absolute;
    top:10px;
    right:20px;
    z-index:10;
}

.post-detail-gallery{
    width:100%;
}

.post-detail-gallery .featured-post__image{
    margin-bottom:12px;
}

.post-detail-gallery img{
    width:100%;
    display:block;
}

.auth-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:24px 16px;
}

.auth-page::before{
    content:"";
    position:fixed;
    inset:0;
    background:url("../patterns/pb-pattern.png") repeat;
    background-size:480px;
    opacity:0.2;
    pointer-events:none;
    z-index:0;
}

.auth-card{
    position:relative;
    z-index:1;
    width:100%;
    max-width:420px;
    padding:28px 24px;
    background:#ffffff;
    border-radius: 14px;
}

.auth-logo-wrap{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.auth-logo{
    max-width:120px;
    height:auto;
}

.auth-title{
    margin:0 0 18px;
    color:var(--primary);
    font-size:28px;
    font-weight:500;
    text-align:center;
    letter-spacing: -.5px;
}

.auth-subtitle{
    margin:0 0 24px;
    color:var(--text);
    font-size:16px;
    line-height:1.2;
    letter-spacing:0.5px;
    text-align:center;
}

.auth-errors{
    margin-bottom:16px;
    padding:12px 14px;
    background:#fff1f4;
    border:1px solid #f3c8d5;
    color:#a11b45;
    font-size:14px;
    line-height:1.5;
}

.auth-errors a{
    color:var(--primary);
    font-weight:600;
    text-decoration:none;
}

.auth-success{
    margin-bottom:16px;
    padding:12px 14px;
    background:#eefaf2;
    border:1px solid #bfe3ca;
    color:#1d6b3b;
    font-size:14px;
    line-height:1.5;
}

.auth-form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.auth-field input,
.auth-field select,
.auth-field option{
    width:100%;
    height:52px;
    padding:0 14px;
    border:1px solid #d8d8d8;
    background:var(--box-bg);
    color:var(--text);
    font-size:14px;
    font-family: var(--pb-font);
    outline:none;
    border-radius:14px!important;
}

.auth-field input:focus,
.auth-field select:focus{
    border-color:var(--action);
}

.auth-field input[type="file"]{
    height:auto;
    padding:12px;
}

.auth-field textarea,
textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid var(--box-border);
    background:var(--box-bg);
    color:var(--text);
    font-size:14px;
    font-family: var(--pb-font);
    outline:none;
    resize:vertical;
    border-radius:16px;
}

.auth-field input.auth-input-readonly,
.auth-field input[readonly][data-invite-email-locked="1"] {
    background: #ffffff;
    color: #707070;
    opacity: 1;
    cursor: default;
    -webkit-text-fill-color: #707070;
}

.auth-field input.auth-input-readonly:focus,
.auth-field input[readonly][data-invite-email-locked="1"]:focus {
    outline: none;
}

.auth-btn{
    height:48px;
    width:100%;
    border:0;
    background:var(--primary);
    color:#fff;
    font-family: var(--pb-font);
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    border-radius:14px;
}

.auth-btn:disabled{
    opacity:0.6;
    cursor:not-allowed;
}

.auth-btn:hover{
    background:var(--pet-title);
}

.auth-alt{
    font-family: var(--pb-font);
    margin:18px 0 0;
    color:var(--text);
    font-size:14px;
    letter-spacing:0.05px;
    text-align:center;
}

.auth-alt a{
    color:var(--primary);
    font-weight:600;
}

.auth-alt a:hover{
    color: var(--pet-title);
}

.auth-close{
    position:absolute;
    top:14px;
    right:16px;
    color:#999;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
}

.auth-close:hover{
    color:#000;
}

.auth-help{
    margin:0 0 4px;
    font-size:14px;
    text-align:center;
}

.auth-help a{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
}

/*===============================
        LOCATION SEARCH
=================================*/
.location-search-results {
    margin-top: 8px;
    border: 1px solid rgba(112, 112, 112, 0.25);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    font-size: 14px;
}

.location-search-result {
    width: 100%;
    display: block;
    border: 0;
    background: #fff;
    color: var(--text);
    padding: 10px 12px;
    text-align: left;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.location-search-result:hover {
    background: rgba(189, 30, 81, 0.08);
    color: var(--primary);
}

.location-search-empty {
    padding: 10px 12px;
    color: var(--text);
    font-size: 14px;
}

.page-wrap{
    max-width:900px;
    margin:40px auto;
    padding:0 16px;
}

.profile-card{
    padding:24px;
    background:#fff;
    box-shadow:var(--shadow);
}

.just-shadow{
    box-shadow:var(--shadow);
}

.profile-top{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:24px;
}

.profile-avatar-wrap{
    width:140px;
    height:140px;
    flex:0 0 140px;
}

.profile-avatar{
    width:140px;
    height:140px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.profile-avatar-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:140px;
    height:140px;
    border-radius:50%;
    background:#f3f3f3;
    font-size:48px;
}

.profile-meta h1{
    margin:0 0 12px;
}

.profile-meta p{
    margin:0 0 8px;
}

.profile-section{
    margin-top:28px;
}

.profile-section h2,
.section__head h2{
    margin:0 0 10px;
    font-size:24px;
    letter-spacing:-0.5px;
}

.profile-actions{
    margin-top:24px;
}

.profile-section-background{
    background-color:var(--box-bg);
    width:100%;
    padding:20px;
    min-height:340px;
    align-items:center;
}

.btn-secondary{
    display:inline-block;
    padding:6px 8px;
    background: var(--muted);
    color: white;
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

.btn-secondary:hover{
    background: var(--text);
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:24px 0 12px;
}

.pet-row{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.pet-circle{
    width:90px;
    color:#333;
    text-align:center;
    text-decoration:none;
}

.pet-circle img,
.pet-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:80px;
    height:80px;
    margin:0 auto 6px;
    border-radius:50%;
    background:#f3f3f3;
    object-fit:cover;
    font-size:28px;
}

.pet-circle span{
    font-size:13px;
}

.pet-add div{
    display:flex;
    align-items:center;
    justify-content:center;
    width:80px;
    height:80px;
    margin:0 auto 6px;
    border-radius:50%;
    background:#eee;
    font-size:28px;
}

/* =========================
   EDIT PET
   ========================= */

.edit-pet-actions{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.edit-pet-actions .auth-btn{
    width:100%;
}

.add-pet-image-preview{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:inherit;
    display:block;
}

.add-pet-image-slot{
    overflow:hidden;
}

.edit-pet-hero{
    position:relative;
}

.edit-pet-hero-upload{
    display:block;
    width:100%;
    height:100%;
    cursor:pointer;
}

.edit-pet-hero-upload .pet-profile-hero-image{
    display:block;
}

.edit-pet-hero-delete{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    border:0;
    padding:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.edit-pet-hero-delete .icon-svg{
    width:22px;
    height:22px;
    filter:drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.edit-pet-hero-delete .icon-filled{
    display:none;
}

.edit-pet-hero-delete:hover,
.edit-pet-hero-delete:focus-visible{
    color:var(--primary);
    transform:scale(1.05);
}

.edit-pet-hero-delete:focus-visible{
    outline:none;
}

.edit-pet-hero-close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:3;
    border:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.edit-pet-hero-close .icon-svg{
    width:22px;
    height:22px;
    filter:drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.edit-pet-hero-close:hover,
.edit-pet-hero-close:focus-visible{
    color:var(--primary);
    transform:scale(1.05);
}

.edit-pet-hero-close:focus-visible{
    outline:none;
}

.edit-pet-thumb-button{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid #d4d4d4;
    background:#ececec;
    padding:0;
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.edit-pet-thumb-button img.add-pet-image-preview{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.edit-pet-thumb-button .add-pet-plus{
    pointer-events:none;
}

.edit-pet-thumb-button.is-active{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(189, 30, 81, 0.18);
}

.edit-pet-thumb-button:hover,
.edit-pet-thumb-button:focus-visible{
    border-color:var(--primary);
}

.edit-pet-thumb-button:focus-visible{
    outline:none;
}

/* ========================================
   PET PROFILE STYLES
   ======================================== */

.pet-profile-page{
    padding:0;
    margin:0;
}

.pet-profile-hero{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    background:#d9d9d9;
}

.pet-profile-image,
.pet-profile-hero-image{
    display:block;
    width:100%;
    height:520px;
    max-height:520px;
    object-fit:cover;
    object-position:center;
}

.pet-profile-hero-trigger{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}

.pet-profile-image-grid{
    box-sizing:border-box;
    padding:20px;
}

.pet-profile-hero-close{
    position:absolute;
    top:10px;
    right:0px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
}

.pet-profile-hero-close .icon-svg{
    width:22px;
    height:22px;
    display:block;
    filter:drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.pet-profile-hero-close:hover,
.pet-profile-hero-close:focus-visible{
    color:var(--primary);
    transform:scale(1.05);
}

.pet-profile-hero-close:focus-visible{
    outline:none;
}

.pet-profile-hero-edit{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:transparent;
    color:#ffffff;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    transition:color 0.2s ease;
}

.pet-profile-hero-edit .icon-svg{
    width:22px;
    height:22px;
    display:block;
}

.pet-profile-hero-edit:hover,
.pet-profile-hero-edit:focus-visible{
    color:var(--primary);
}

.pet-profile-info-card{
    background:white;
    padding:18px 24px 20px;
}

.pet-profile-info-top{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:end;
}

.pet-profile-info-main{
    min-width:0;
}

.pet-profile-follow-btn{
    align-self:end;
    margin-top:0;
    margin-bottom:2px;
}

.pet-profile-info-head{
    display:block;
    margin-bottom: 8px;
}

.pet-profile-name-row{
    display:block;
    width:100%;
}

.pet-profile-name-inline{
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    width:auto;
    max-width:100%;
    margin:0;
    font-size:23px;
    line-height:1.1;
    font-weight:500;
    color:#4f5f6c;
}

.pet-profile-name-inline span{
    display:inline;
}

.pet-profile-info-edit{
    position:relative;
    top:-1px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
    margin:0;
    padding:0;
    border-radius:0;
    background:transparent;
    color:#26BCC2;
    text-decoration:none;
    vertical-align:middle;
    transition:color 0.2s ease;
}

.pet-profile-info-edit .icon-svg{
    width:22px;
    height:22px;
    display:block;
}

.pet-profile-info-edit:hover,
.pet-profile-info-edit:focus-visible{
    color:var(--primary);
}

.pet-profile-hero-edit .icon-outline,
.pet-profile-info-edit .icon-outline{
    display:block !important;
}

.pet-profile-hero-edit .icon-filled,
.pet-profile-info-edit .icon-filled{
    display:none !important;
}

.pet-profile-info-card p{
    margin:0 0 0px;
    font-size:14px;
    line-height:1.35;
    color:#7a7a7a;
}

.pet-profile-info-card p strong{
    color:#6b6b6b;
    font-weight:700;
}

.pet-profile-bio{
    margin-top:0;
    font-size:14px;
    line-height:1.35;
    color:#6f6f6f;
    white-space:pre-line;
}

.pet-profile-posts-section{
    margin-top:12px;
    padding:30px 24px 36px;
    background:#f3f3f3;
}

.pet-profile-posts-title{
    margin:0 0 18px;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:#bd1e51;
}

.pet-profile-post-list{
    display:flex;
    flex-direction:column;
}

.pet-profile-post-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin:0 0 18px;
    padding:0 0 18px;
    border-bottom:1px solid #d7d7d7;
}

.pet-profile-post-thumb{
    display:block;
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    background:#d9d9d9;
}

.pet-profile-post-body{
    flex:1;
    min-width:0;
}

.pet-profile-post-title{
    margin:0 0 4px;
    font-size:14px;
    font-weight:700;
    color:#5b6770;
}

.pet-profile-post-excerpt{
    margin-bottom:10px;
    font-size:12px;
    color:#7a7a7a;
}

.pet-profile-post-stats{
    display:flex;
    align-items:center;
    gap:22px;
}

.pet-profile-post-stat{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:12px;
    color:#777777;
}

.pet-profile-post-stat .icon-btn--like{
    margin:0;
}

.pet-profile-post-stat .icon-count{
    margin:0;
}

.pet-profile-post-stat .icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    background:transparent;
    color:#26BCC2;
}

.pet-profile-post-stat .icon-svg{
    width:22px;
    height:22px;
}

.pet-profile-post-stat .icon-outline{
    display:block;
}

.pet-profile-post-stat .icon-filled{
    display:none;
}

.pet-profile-post-stat .icon-btn.is-active .icon-outline{
    display:none;
}

.pet-profile-post-stat .icon-btn.is-active .icon-filled{
    display:block;
}

.pet-profile-create-post{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:6px;
    color:#b0b0b0;
    text-decoration:none;
}

.pet-profile-create-post-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:58px;
    height:58px;
    border:1px solid #d2d2d2;
    border-radius:50%;
    background:white;
    font-size:38px;
    color:#57cfd0;
}

.pet-profile-meta-row{
    padding:0 0 18px;
}

.pet-profile-meta-row + .pet-profile-info-head{
    margin-bottom:0;
}

/* COUNTER */
.add-pet-counter-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.add-pet-counter {
    font-size: 12px;
    color: #707070;
}

/* OWNER PROFILE STYLES */

.owner-profile-hero-edit .icon-outline,
.owner-profile-info-edit .icon-outline{
    display:block !important;
}

.owner-profile-hero-edit .icon-filled,
.owner-profile-info-edit .icon-filled{
    display:none !important;
}

.owner-profile-page{
    padding:0;
    margin:0;
}

.owner-profile-hero{
    position:relative;
    width:100%;
    max-height: 320px;
    margin:0;
    padding:40px;
    overflow:hidden;
    background:#d9d9d9;
    text-align: center;
}

.owner-profile-hero-image{
    width:200px;
    height: 200px;
    border-radius: 50%;
    display:block;
    object-fit:cover;
    object-position:center;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid var(--muted);
    background: white;
    box-shadow: 0 10px 10px rgba(0,0,0,.15);
}

.owner-profile-hero-image.placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:48px;
    color:#7d7d7d;
    background:linear-gradient(135deg, #e8e8e8, #d6d6d6);
}

.owner-profile-hero-edit{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:transparent;
    color:#ffffff;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45));
    transition:color 0.2s ease;
}

.owner-profile-hero-edit .icon-svg{
    width:22px;
    height:22px;
    display:block;
}

.owner-profile-hero-edit:hover,
.owner-profile-hero-edit:focus-visible{
    color:var(--primary);
}

.owner-profile-info-card{
    background:#f3f3f3;
    padding:18px 24px 22px;
    overflow:hidden;
}

.owner-profile-info-head{
    display:block;
    margin-bottom:10px;
}

.owner-profile-name-row{
    display:block;
    width:100%;
}

.owner-profile-name-inline{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:auto;
    max-width:100%;
    font-size:24px;
    line-height:1.1;
    font-weight:500;
    color:#526270;
    flex-wrap:wrap;
}

.owner-profile-name-inline span{
    display:inline;
}

.owner-profile-info-edit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
    padding:0;
    margin:0;
    background:transparent;
    color:#57cfd0;
    text-decoration:none;
    vertical-align:middle;
    position:relative;
    top:-1px;
    border-radius:0;
    transition:color 0.2s ease;
}

.owner-profile-info-edit .icon-svg{
    width:22px;
    height:22px;
    display:block;
}

.owner-profile-info-edit:hover,
.owner-profile-info-edit:focus-visible{
    background:transparent;
    color:var(--primary);
}

.owner-profile-info-card p{
    display:block;
    margin:0 0 4px;
    font-size:14px;
    line-height:1;
    color:#7a7a7a;
}

.owner-profile-info-card p strong{
    color:#666666;
    font-size: 14px;
    font-weight:700;
}

.owner-profile-bio{
    display:block;
    width:100%;
    margin-top:14px;
    font-size:14px;
    line-height:1.35;
    color:#747474;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.owner-profile-info-card{
    background:white;
    padding:24px;
    overflow:hidden;
}

.owner-profile-info-head h1{
    margin:0;
    font-size:24px;
    line-height:1.08;
    font-weight:500;
    color:#526270;
}

.owner-profile-groups-section{
    background:#f3f3f3;
    padding:26px 20px 34px;
    margin-top:12px;
}

.owner-profile-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
}

.owner-profile-section-title{
    margin:0;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:#BD1E51;
}

.owner-profile-view-all{
    font-size:14px;
    line-height:1;
    color:#4f6575;
    text-decoration:none;
}

.owner-profile-pet-grid{
    display:flex;
    align-items:flex-start;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
}

.owner-profile-pet-grid::-webkit-scrollbar{
    display:none;
}

.owner-profile-pet-card{
    flex:0 0 auto;
    width:88px;
    text-decoration:none;
    text-align:center;
}

.owner-profile-pet-image-wrap{
    width:82px;
    height:82px;
    border-radius:50%;
    overflow:hidden;
    background:#d9d9d9;
    margin:0 auto 8px;
}

.owner-profile-pet-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.owner-profile-pet-image.placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#7d7d7d;
    background:#e7e7e7;
}

.owner-profile-pet-name{
    display:block;
    font-size:12px;
    line-height:1.2;
    font-weight:600;
    color:#4f5f6c;
}

.owner-profile-pet-card--add .owner-profile-pet-image-wrap{
    border:1px solid #d6d6d6;
    background:#f5f5f5;
}

.owner-profile-pet-image-wrap--add{
    display:flex;
    align-items:center;
    justify-content:center;
}

.owner-profile-add-icon{
    font-size:40px;
    line-height:1;
    color:#57cfd0;
    margin-top: -8px;
}

.owner-profile-group-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.owner-profile-group-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:0 0 16px;
    margin:0 0 16px;
    border-bottom:1px solid #d7d7d7;
}

.owner-profile-group-thumb-link{
    flex:0 0 auto;
    text-decoration:none;
}

.owner-profile-group-thumb{
    width:58px;
    height:58px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    display:block;
    background:#d9d9d9;
}

.owner-profile-group-thumb.placeholder{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#7d7d7d;
    background:#e7e7e7;
}

.owner-profile-group-body{
    min-width:0;
    flex:1;
    padding-top:2px;
}

.owner-profile-group-title{
    display:block;
    margin:0 0 4px;
    font-size:14px;
    line-height:1.25;
    font-weight:700;
    color:#4f5f6c;
    text-decoration:none;
}

.owner-profile-group-role{
    color:#57cfd0;
    font-style:italic;
    font-weight:400;
    font-size: 12px;
    margin-top: -6px;
}

.owner-profile-group-excerpt{
    margin:0 0 7px;
    font-size:12px;
    line-height:1.35;
    color:#727272;
}

.owner-profile-group-meta{
    font-size:12px;
    line-height:1.3;
    color:#6f6f6f;
    font-style:italic;
}

.owner-profile-create-group{
    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
    color:#b1b1b1;
    margin-top:4px;
}

.owner-profile-groups-section{
    background-color:white;
}

.owner-profile-create-group-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    border:1px solid #d2d2d2;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    line-height:1;
    color:#57cfd0;
    flex:0 0 auto; 
}

.owner-profile-create-group-text{
    font-size:18px;
    line-height:1.2;
    color:#b1b1b1;
}

/* =========================
   CREATE GROUP INVITE BOX
   ========================= */

.group-invite-box{
    margin:10px 0;
    border:1px solid #d8d8d8;
    background:var(--box-bg);
    border-radius:18px;        /* 👈 rounded corners */
    overflow:hidden;           /* 👈 keeps inner borders clean */
}

.group-invite-row{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 0 0 18px;
    border:0;
    background:var(--box-bg);
    color:var(--text);
    font-size:14px;
    font-family:'Google Sans', Arial, sans-serif;
    text-align:left;
    cursor:default;
}

.group-invite-row__icon{
    width:78px;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-left:1px solid #d8d8d8;
    color:var(--action);
    flex:0 0 78px;
}

.group-invite-row__icon svg{
    width:18px;
    height:18px;
    display:block;
}

.group-invite-list{
    padding:14px 22px 16px;
    border-top:1px solid #d8d8d8;
    background:var(--box-bg);
}

.group-invite-list__title{
    margin:0 0 12px;
    color:#4f6575;
    font-size:14px;
    line-height:1.35;
    font-weight:400;
}

.group-invite-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 8px;
    color:var(--text);
    font-size:14px;
    line-height:1.35;
    cursor:pointer;
}

.group-invite-item:last-child{
    margin-bottom:0;
}

.group-invite-item input[type="checkbox"]{
    margin:2px 0 0;
    accent-color:var(--action);
    flex:0 0 auto;
}

.group-invite-item span{
    display:block;
}

.create-group-hero-close{
    position:absolute;
    top:10px;
    right:10px;
    left:auto !important;
    bottom:auto !important;
    z-index:5;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    color:#ffffff;
    cursor:pointer;
}

.create-group-hero-close .icon-svg{
    width:22px;
    height:22px;
    display:block;
    filter:drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.create-group-hero-close:hover,
.create-group-hero-close:focus-visible{
    color:var(--primary);
    transform:scale(1.05);
}

.create-group-hero-close:focus-visible{
    outline:none;
}

.create-group-hero-close .icon-filled{
    display:none;
}

.create-group-page .add-pet-title{
    margin-bottom:8px;
}

.group-join-btn {
    margin-top: 12px;
    background-color: var(--box-bg);
    border: 1px solid #d8d8d8;
    width: 30%;
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    padding: 6px 0 !important;
}

.group-join-btn:hover {
    background-color: var(--muted);
    color: #fff;
}

.group-create-post-btn {
    background: var(--primary);
    color: #fff;
    text-align: center;
    display: inline-block;
    width: 30%;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.group-create-post-btn:hover {
    background: var(--viewall);
    color: #fff;
}

/* =========================
   GROUP ACTIVITY FEED
   ========================= */

.group-members-section {
    background: var(--box-bg);
}

.group-activity-section {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
}

.group-activity-section .owner-profile-section-head {
    padding: 0;
    margin-bottom: 18px;
    background: #fff;
}

.group-activity-card {
    background: #fff;
    padding: 16px 0 12px;
}

.group-activity-card + .group-activity-card {
    border-top: 1px solid var(--box-border);
}

.group-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.group-activity-avatar {
    width: 46px;
    min-width: 46px;
    flex: 0 0 46px;
}

.group-activity-avatar .pet-avatar,
.group-activity-avatar .placeholder-avatar {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
}

.group-activity-avatar .pet-avatar__img,
.group-activity-avatar img.owner-profile-pet-image,
.group-activity-avatar img {
    width: 46px !important;
    height: 46px !important;
    object-fit: cover;
    display: block;
}

.group-activity-content {
    flex: 1;
    min-width: 0;
}

.group-activity-post-body,
.group-activity-content .icon-count {
    color: var(--text);
    font-size: 14px;
}

.group-activity-member-name{
    color: var(--action);
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 4px;
}

.group-activity-post-title {
    color: var(--pet-title);
    font-size: 16px;
    font-weight: 700;
}

.group-activity-post-body {
    margin-bottom: 8px;
    line-height: 1.2;
}

.group-activity-member-name-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.group-activity-post-edit {
    width: 18px;
    height: 18px;
    color: var(--action);
    flex: 0 0 auto;
}

.group-activity-post-edit.icon-btn--edit {
    color: var(--action) !important;
    margin-top: -6px;
}

.group-activity-post-edit.icon-btn--edit .icon-outline {
    display: block !important;
    stroke: var(--action) !important;
    fill: none !important;
}

.group-activity-post-edit.icon-btn--edit .icon-filled {
    display: none !important;
}

.group-activity-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
}

.group-activity-image-grid {
    display: grid;
    gap: 8px;
    margin: 10px 0 8px;
}

.group-activity-image-grid--1 {
    grid-template-columns: 1fr;
}

.group-activity-image-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.group-activity-image-grid--3,
.group-activity-image-grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

.group-activity-image-wrap {
    overflow: hidden;
    background: var(--box-bg);
    border-radius: 8px;
}

.group-activity-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.owner-profile-empty-state{
    padding:6px 0 12px;
}

.owner-profile-empty-state p{
    margin:0;
    font-size:14px;
    line-height:1.4;
    color:#7a7a7a;
}

.icon-btn--edit{
    padding:0;
    border:0;
    box-shadow:none;
}

.icon-btn--edit .icon-svg{
    width:20px;
    height:20px;
    display:block;
}

.icon-btn--edit .icon-outline{
    display:block;
}

.icon-btn--edit .icon-filled{
    display:none;
}

.icon-btn--edit:hover .icon-outline,
.icon-btn--edit:focus-visible .icon-outline{
    display:none;
}

.icon-btn--edit:hover .icon-filled,
.icon-btn--edit:focus-visible .icon-filled{
    display:block;
}

.pet-close-btn{
    position:absolute;
    top:10px;
    right:10px;
    z-index:20;
}

.feed-layout{
    max-width:420px;
    margin:40px auto;
}

.feed-main{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.feed-section{
    padding:20px;
    background:#fff;
    box-shadow:var(--shadow);
}

.circle-row{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding-bottom:4px;
}

.circle-item{
    min-width:88px;
    color:#333;
    text-align:center;
    text-decoration:none;
}

.circle-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:80px;
    height:80px;
    margin:0 auto 8px;
    border-radius:50%;
    overflow:hidden;
    background:#f2f2f2;
}

.circle-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.circle-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:#f2f2f2;
    font-size:30px;
}

.circle-item span{
    display:block;
    font-size:13px;
}

.feed-card{
    margin-bottom:16px;
    padding:16px;
    border:1px solid #eee;
    background:#fff;
}

.feed-card:last-child{
    margin-bottom:0;
}

.feed-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.feed-post-avatar{
    width:52px;
    height:52px;
    flex:0 0 52px;
    border-radius:50%;
    overflow:hidden;
    background:#f2f2f2;
}

.feed-post-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.feed-meta{
    margin:4px 0 0;
    color:#777;
    font-size:13px;
}

.feed-card-title h3{
    margin:0 0 10px;
    font-size:20px;
}

.feed-card-body p{
    margin:0;
    line-height:1.6;
}

.feed-empty{
    color:#666;
    line-height:1.6;
}

.footer-nav{
    position:fixed;
    bottom:0;
    width:100%;
    max-width:520px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:10px 0;
    background:var(--primary);
    z-index:25;
}

.footer-icon svg{
    width:24px;
    height:24px;
    display:block;
    stroke:white;
}

.footer-icon:hover svg{
    stroke:#000;
}

/* =========================
   VIEWER MODAL
   ========================= */

.viewer-modal[hidden]{
    display:none;
}

.viewer-modal{
    position:fixed;
    top:74px;
    bottom:60px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:520px;
    z-index:100;
}

.viewer-modal__backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
}

.viewer-modal__panel{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

.viewer-modal__media-wrap{
    position:relative;
    width:100%;
    height:100%;
}

.viewer-modal__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.viewer-modal__close{
    position:absolute;
    top:20px;
    right:24px;
    z-index:30;
    width:24px;
    height:24px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,0.8);
    font-size:28px;
    line-height:1;
    cursor:pointer;
    text-shadow:0 1px 4px rgba(0,0,0,0.45);
}
.viewer-modal__close:hover{
    color: var(--primary);
}

.viewer-modal__nav{
    position:absolute;
    top:50%;
    z-index:25;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border:0;
    border-radius:999px;
    background:rgba(0,0,0,0.25);
    color:#fff;
    font-size:28px;
    cursor:pointer;
    transform:translateY(-50%);
}

.viewer-modal__nav--prev{
    left:10px;
}

.viewer-modal__nav--next{
    right:10px;
}

.viewer-modal__bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:20;
    padding:40px 20px 20px;
    color:#fff;
    background:linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.72) 32%,
        rgba(0, 0, 0, 0.38) 60%,
        rgba(0, 0, 0, 0.12) 82%,
        rgba(0, 0, 0, 0) 100%
    );
}

.viewer-modal__overlay{
    display:flex;
    align-items:flex-end;
    gap:12px;
    margin-bottom:14px;
}

.viewer-modal__avatar-link{
    flex:0 0 auto;
}

.viewer-modal__avatar{
    width:82px;
    height:82px;
    flex-shrink:0;
    border:2px solid #fff;
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,0.15);
}

.viewer-modal__avatar img,
#viewerAvatarImage{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.viewer-modal__meta{
    flex:1;
    min-width:0;
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.viewer-modal__name-row{
    margin-bottom:4px;
}

.viewer-modal__name{
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
}

.viewer-modal--group-post #viewerOpenPost {
    display: none !important;
}

#viewerBreed,
#viewerAge,
#viewerLocation{
    color:rgba(255,255,255,0.95);
    font-size:14px;
    line-height:1.25;
}

.viewer-modal__follow{
    flex:0 0 auto;
    align-self:center;
    margin-left:8px;
}

.viewer-modal__actions{
    width:100%;
    margin-bottom:14px;
}

.viewer-modal__actions .icon-row.post-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.viewer-modal__actions .post-actions__left{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
}

.viewer-modal__actions .post-actions__right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin-left:auto !important;
    padding:0 !important;
}

.viewer-modal__actions .post-action{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
}

.viewer-modal__actions .post-action--like,
.viewer-modal__actions .post-action--comment{
    gap:0 !important;
}

.viewer-modal__actions .icon-btn{
    position:relative;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:24px;
    height:24px;
    flex:0 0 24px !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
}

.viewer-modal__actions .icon-btn--like{
    width:28px;
    height:28px;
    flex:0 0 28px !important;
}

.viewer-modal__actions .icon-count,
.viewer-modal__actions .action-icon,
.viewer-modal__actions .like-icon,
.viewer-modal__actions svg{
    color:#fff !important;
    stroke:#fff;
}

.viewer-modal__actions .icon-count{
    display:inline-block !important;
    margin:0 !important;
    margin-right:0 !important;
    padding:0 !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    color:#fff !important;
}

.viewer-modal__actions .post-action--like .icon-count,
.viewer-modal__actions .post-action--comment .icon-count{
    margin-left:5px !important;
    line-height:1 !important;
}

.viewer-modal__actions .icon-btn--like.is-active,
.viewer-modal__actions .icon-btn--like.is-active svg{
    color:#ff4d6d !important;
    stroke:#ff4d6d;
}

.viewer-modal__text{
    color:#fff;
}

.viewer-modal__text h3,
.viewer-modal__text p{
    color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.viewer-modal__text h3{
    margin:0 0 6px;
    font-size:14px;
    font-weight:700;
    line-height:1.3;
}

.viewer-modal__text p{
    margin:0 0 12px;
    font-size:14px;
    font-weight:400;
    line-height:1.45;
}

.viewer-open-post{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:32px !important;
    padding:0 12px !important;
    border-radius:20px 20px 20px 0;
    background:var(--action);
    color:#333 !important;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    line-height:1 !important;
}

.viewer-open-post:hover{
    background: var(--pet-title);
    color: white !important;
}

/* =========================
   MOBILE VIEWER TAP FIX
   Let taps on media reach the parent viewer trigger
========================= */

[data-viewer="pet"] .featured-post__img,
[data-viewer="pet"] .featured-post__video,
.pet-profile-hero-trigger .pet-profile-hero-image,
.post-viewer-trigger .featured-post__img,
.post-viewer-trigger .featured-post__video {
    pointer-events: none;
}

/* =========================
   COMMENTS MODAL
   ========================= */
.comments-modal{
    position:fixed;
    inset:0;
    z-index:10045;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease, visibility .22s ease;
}

.comments-modal.is-open{
    opacity:1;
    visibility:visible;
}

.comments-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    transition:opacity .22s ease;
}

.comments-modal.is-open .comments-modal__backdrop{
    opacity:1;
}

.comments-modal__panel{
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%) translateY(100%);
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:420px;
    height:70vh;
    overflow:hidden;
    border-radius:20px 20px 0 0;
    background:#fff;
    transition:transform .26s ease;
}

.comments-modal.is-open .comments-modal__panel{
    transform:translateX(-50%) translateY(0);
}

.comments-modal__close{
    position:absolute;
    top:12px;
    right:14px;
    border:0;
    background:transparent;
    font-size:24px;
    cursor:pointer;
}

.comments-modal__header{
    padding:18px 16px 12px;
    border-bottom:1px solid #eee;
}

.comments-modal__header h3{
    margin:0;
}

.comments-modal__list{
    flex:1;
    overflow-y:auto;
    padding:14px 16px;
}

.comments-modal__item{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
}

.comments-modal__avatar{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:999px;
    overflow:hidden;
    background:#eee;
}

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

.comments-modal__content{
    font-size:14px;
    flex:1;
}

.comments-modal__content p{
    margin-block-start:0.25em;
    margin-block-end:0.25em;
}

.comments-modal__meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
}

.comments-modal__meta strong{
    margin:0;
}

.comments-modal__time{
    color:#777;
    font-size:12px;
}

.comments-modal__delete{
    margin-left:auto;
    padding:0;
    border:0;
    background:transparent;
    color:#999;
    font-size:12px;
    cursor:pointer;
}

.comments-modal__form{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:12px 16px;
    border-top:1px solid #eee;
}

.comments-modal__form textarea{
    flex:1;
    min-height:44px;
    max-height:100px;
    resize:vertical;
}

.comments-modal__form button{
    flex-shrink:0;
    align-self: end;
    padding: 10px 20px;
    border: 1px solid var(--pet-title);
    border-radius: 20px 20px 20px 0;
    color: var(--pet-title);
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
}

.comments-modal__form button:hover {
    background-color: var(--pet-title);
    color: white;
}

.comments-empty{
    font-size:14px;
    line-height:1.4;
    color:#707070;
    text-align:center;
    padding:16px 12px;
}

.comments-login-link{
    display:inline-block;
    margin-top:6px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
}

.comments-login-link:hover{
    text-decoration:underline;
}

.comments-modal__actions{
    margin-top:4px;
}

.comments-modal__reply-btn{
    padding:0;
    border:0;
    background:transparent;
    color:#999;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.comments-modal__reply-btn.is-active{
    color:var(--primary);
}

.comments-modal__replies{
    width:100%;
    margin-top:8px;
    margin-left:60px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.comments-modal__item--reply .comments-modal__content{
    font-size:12px;
    line-height:1.2;
}

.comments-modal__replies .comments-modal__item--reply:first-child{
    position:relative;
}

.comments-modal__replies .comments-modal__item--reply:first-child::before{
    content:'↳';
    position:absolute;
    left:-14px;
    top:-6px;
    font-size:14px;
    color:#999;
}

.comments-modal__replies .comments-modal__item--reply + .comments-modal__item--reply{
    border-top:1px solid #f0f0f0;
    padding-top:6px;
}

.comments-modal__item--reply .comments-modal__meta{
    margin-bottom:2px;
}

.comments-modal__item--reply{
    margin-left:0;
    margin-bottom:0;
}

.comments-modal__item--reply .comments-modal__avatar{
    display:none;
}

.comments-modal__reply-indicator{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 0 8px;
    font-size:12px;
    color:#707070;
}

.comments-modal__reply-cancel{
    padding:0;
    border:0;
    background:transparent;
    color:var(--primary);
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.comments-modal__reply-popup{
    position:relative;
    z-index:2;
    margin-top:8px;
    padding:12px;
    border:1px solid #e4e4e4;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,0.08);
}

.comments-modal__reply-popup-close{
    position:absolute;
    top:8px;
    right:8px;
    padding:0;
    border:0;
    background:transparent;
    color:#777;
    font-size:16px;
    line-height:1;
    cursor:pointer;
}

.comments-modal__reply-popup-label{
    margin-bottom:8px;
    padding-right:18px;
    font-size:12px;
    font-weight:600;
    color:#707070;
}

.comments-modal__reply-popup-textarea{
    width:100%;
    min-height:72px;
    max-height:120px;
    margin-bottom:10px;
    resize:vertical;
}

.comments-modal__reply-popup-submit{
    padding:8px 16px;
    border:1px solid var(--pet-title);
    border-radius:20px 20px 20px 0;
    color:var(--pet-title);
    background:transparent;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.comments-modal__reply-popup-submit:hover{
    background-color:var(--pet-title);
    color:#fff;
}

.comments-modal__body--suspended {
    color: var(--primary) !important;
    font-weight: 600;
}

/* =========================
   ADD PET
   ========================= */

.add-pet-page{
    background:#f3f3f3;
}

.add-pet-hero{
    padding:36px 24px 28px;
    text-align:center;
    background:#f3f3f3;
}

.add-pet-title{
    margin:0 0 12px;
    font-size:28px;
    line-height:1.1;
    color:#BD1E51;
    font-weight:700;
}

.add-pet-subtitle{
    margin:0 auto 28px;
    max-width:280px;
    font-size:18px;
    line-height:1.1;
    color:#707070;
}

.add-pet-actions{
    display:flex;
    justify-content:center;
    align-items:start;
}

.add-pet-action-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    text-align:center;
    cursor:pointer;
    border: 0;
}

.add-pet-action-icon{
    width:78px;
    height:78px;
    border-radius:18px;
    border:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#26BCC2;
    background:#fff;
}

.add-pet-action-text{
    font-family: var(--pb-font);
    font-size:13px;
    line-height:1.2;
    color:#707070;
    max-width:120px;
}

.add-pet-action-card--disabled{
    opacity:0.9;
    cursor:default;
}

.add-pet-form-wrap{
    background:#fff;
    padding:26px 20px 32px 20px;
}

.add-pet-form-wrap .auth-field input{
    background:#f3f3f3;
}

.add-pet-block + .add-pet-block{
    margin-top:28px;
}

.add-pet-block-title{
    margin:0 0 20px;
    font-size:22px;
    color:#BD1E51;
    font-weight:700;
}

.add-pet-block .auth-field{
    margin-bottom:10px;
}

.add-pet-image-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.gray-box {
    background-color: var(--box-bg);
}

.add-pet-image-slot{
    aspect-ratio:1 / 1;
    border-radius:50%;
    border:1px solid #d5d5d5;
    background:#f3f3f3;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}

.add-pet-plus{
    font-size:38px;
    line-height:1;
    color:#26BCC2;
}

.add-ten{
    margin-top: 6px!important;
}
.add-pet-image-note{
    margin:-10px 0 10px 0;
    font-size:13px;
    color:#707070;
}

.add-pet-about-label{
    display:block;
    margin:0 0 10px;
    font-size:14px;
    font-weight:700;
    color:#BD1E51;
}

.auth-field--textarea textarea{
    width:100%;
    min-height:120px;
    border-radius:18px;
    border:1px solid #d7d7d7;
    background:#f3f3f3;
    padding:16px 18px;
    font-size:14px;
    line-height: 1.35;
    color:#707070;
    resize:none;
    outline:none;
}

.char-count{
    margin-top:6px;
    font-size:12px;
    color:#707070;
    text-align:right;
}

/* =========================
   DELETE MODAL
   ========================= */

.delete-modal[hidden]{
    display:none;
}

.delete-modal{
    position:fixed;
    inset:0;
    z-index:10050;
}

.delete-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
}

.delete-modal__panel{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:calc(100% - 32px);
    max-width:380px;
    border-radius:20px;
    background:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.delete-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    z-index:2;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--action);
    cursor:pointer;
}

.delete-modal__close .icon-svg{
    width:20px;
    height:20px;
}

.delete-modal__close:hover,
.delete-modal__close:focus-visible{
    color:var(--primary);
}

.delete-modal__close:focus-visible{
    outline:none;
}

.delete-modal__content{
    padding:28px 20px 20px;
}

.delete-modal__content h3{
    margin:0 0 10px;
    color:var(--primary);
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.delete-modal__content p{
    margin:0;
    color:var(--text);
    font-size:14px;
    line-height:1.45;
}

.delete-modal__confirm-wrap{
    margin-top:18px;
}

.delete-modal__label{
    display:block;
    margin:0 0 8px;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}

.delete-modal__input{
    width:100%;
    height:52px;
    padding:0 14px;
    border:1px solid #d8d8d8;
    border-radius:16px;
    background:var(--box-bg);
    color:#333;
    font-size:14px;
    font-family:'Google Sans', Arial, sans-serif;
    outline:none;
}

.delete-modal__input:focus{
    border-color:var(--action);
}

.delete-modal__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}

.auth-btn--secondary{
    background:#ececec;
    color:#555;
}

.auth-btn--secondary:hover{
    background:#e3e3e3;
}

/* =========================================================
   AUTH WARNING MODAL
========================================================= */

.auth-warning-modal[hidden]{
    display:none !important;
}

.auth-warning-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;

    opacity:0;
    transition:opacity .2s ease;
}

.auth-warning-modal.is-open{
    opacity:1;
}

.auth-warning-box{
    position:relative;
    background:#ffffff;
    border-radius:16px;
    padding:24px 20px 20px;
    width:100%;
    max-width:320px;
    min-height:170px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    transform:scale(.92);
    opacity:0;
    transition:transform .2s ease, opacity .2s ease;
}

.auth-warning-modal.is-open .auth-warning-box{
    transform:scale(1);
    opacity:1;
}

.auth-warning-close{
    position:absolute;
    top:12px;
    right:12px;
    width:32px;
    height:32px;
    border:0;
    background:transparent;
    color:#707070;
    font-size:18px;
    line-height:1;
    cursor:pointer;
}

.auth-warning-text{
    width:100%;
    font-size:14px;
    line-height:1.3;
    color:#707070;
    margin-top: -10px;
    padding:0;
    white-space:normal;
    text-align:center;
}

.auth-warning-title{
    display:block;
    margin-top: 20px;
    color:var(--primary);
    font-weight:600;
    font-size:20px;
    line-height:1.2;
}

.auth-warning-link{
    display:inline-block;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
}

.auth-warning-link:hover{
    text-decoration:underline;
}

/*===========================
   EDIT POST
   =========================*/

.edit-post-page .add-pet-image-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}

.edit-post-page .add-pet-image-slot{
    aspect-ratio:1 / 1;
    width:100%;
    border-radius:50%;
    overflow:hidden;
}

.edit-post-page .edit-post-thumb-button{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid #d4d4d4;
    background:#ececec;
    padding:0;
    cursor:pointer;
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.edit-post-page .edit-post-thumb-button img.add-pet-image-preview{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
}

.edit-post-page .edit-post-thumb-button.is-active{
    border-color:var(--primary);
    box-shadow:0 0 0 2px rgba(189, 30, 81, 0.18);
}

.edit-post-page .edit-post-thumb-button:hover,
.edit-post-page .edit-post-thumb-button:focus-visible{
    border-color:var(--primary);
}

.edit-post-page .edit-post-thumb-button:focus-visible{
    outline:none;
}

.post-slot-video-thumb{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.post-slot-video-thumb__media{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.add-pet-plus--video{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70%;
    line-height: 1;
    z-index: 2;
}
/*
@media (max-width:899px){
    .footer-nav{
        left:0;
        right:0;
        max-width:none;
    }
}*/

@media (min-width:900px){
    .menu-button{
        display:none;
    }

    .mobile-menu,
    .mobile-menu-overlay{
        display:none;
    }

    .desktop-shell{
        display:grid;
        grid-template-columns:calc(50% - 460px) 200px 520px 1fr;
        gap:0;
        height:100vh;
        overflow:hidden;
        padding:0;
    }

    .sidebar{
        grid-column:2;
        display:block;
        position:sticky;
        top:60px;
        width:200px;
        height:fit-content;
        padding:20px 20px 0 20px;
        background:#121212;
    }

    .sidebar__logo-wrap{
        margin-bottom:22px;
    }

    .sidebar__logo-image{
        max-width:170px;
        height:auto;
    }

    .sidebar__nav{
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .sidebar__nav a{
        color:#e5e5e5;
        font-size:14px;
        font-weight:400;
    }

    .sidebar__nav a:hover{
        color:#26BCC2;
        font-weight:600;
    }

    .menu-item:hover{
        background:rgba(255,255,255,0.05);
        border-radius:6px;
        padding-left:4px;
    }

    .footer-nav{
        left:auto;
        right:auto;
    }
}
/*===========================
   VIEW ALL POSTS
=============================*/

.section-view-all-posts{
    padding:20px 10px 30px 10px;
}

.post-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    margin-top: -10px;
}

.post-grid-card{
    display:block;
    text-decoration:none;
    color:inherit;
}

.post-grid-card__media {
    position: relative;
    height: 360px;
    overflow: hidden;
    background: #d9d9d9;
    border-radius: 8px;
    /* Smooth transition makes the growth look fluid */
    transition: transform 0.5s ease;
}

.post-grid-card__media:hover {
    /* 1.02 equals a 2% increase */
    transform: scale(1.01);
}

.post-grid-card__stretched-link{
    position:absolute;
    inset:0;
    z-index:1;
}

.post-grid-card__stretched-link--button{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    padding:0;
    margin:0;
    background:transparent;
    cursor:pointer;
}

.post-grid-card__image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.post-grid-card__image--placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:linear-gradient(135deg, #d9d9d9, #c8c8c8);
    color:#777;
    font-size:28px;
    font-weight:700;
}

.post-grid-card__overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:grid;
    grid-template-columns:40px 1fr;
    gap:8px;
    z-index:2;
    align-items:end;
    padding:28px 10px 10px;
    background:linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0) 100%);
}

.post-grid-card__avatar-col{
    display:flex;
    align-items:flex-end;
}

.post-grid-card__avatar{
    width:34px;
    height:34px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.5);
    display:flex;
    align-items:center;
    justify-content:center;
}

.post-grid-card__avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.post-grid-card__avatar-placeholder{
    color:#fff;
    font-size:13px;
    font-weight:700;
}

.post-grid-card__text-col{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.post-grid-card__username{
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-bottom:2px;
}

.post-grid-card__title{
    display:block;
    color:#fff;
    font-size:12px;
    font-weight:500;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.post-grid-card__avatar-link{
    display:block;
    position:relative;
    z-index:3;
}

/*========================
    INFINET SCROLL
=========================*/

.view-all-posts__trigger{
    width:100%;
    height:1px;
}

.view-all-posts__actions{
    display:flex;
    justify-content:center;
    padding:16px 0 4px;
}

/*========================
    LOADING
========================*/

.view-all-posts__trigger{
    width:100%;
    height:1px;
    position:relative;
}

.view-all-posts__trigger::after{
    content:'';
    display:none;
    width:24px;
    height:24px;
    margin:20px auto;
    border:3px solid #ddd;
    border-top-color:#BD1E51;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}

.view-all-posts__trigger.is-loading::after{
    display:block;
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.view-all-groups-search-form {
    margin-bottom:20px;
}


.post-grid-card__username{
    text-decoration:none;
    position:relative;
    z-index:3;
}

.post-grid-card__username:hover{
    text-decoration:underline;
}

.view-all-posts__actions{
    display:flex;
    justify-content:center;
    padding:16px 0 4px;
}

/*========================
    BACK TO TOP
=========================*/
.back-to-top-btn{
    position:fixed;
    right:calc(50% - 190px);
    bottom:70px;
    z-index:30;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:var(--primary);
    color:var(--white);
    font-size:22px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,0.18);
}

.back-to-top-btn:hover{
    background:var(--pet-title);
}

@media (max-width:899px){
    .back-to-top-btn{
        right:16px;
        bottom:70px;
    }
}

/* =========================
   OWNER PROFILE ACTION ROW
   ========================= */

.owner-profile-name-row--actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
}

.owner-profile-name-row-left{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
}

.owner-profile-name-row-right{
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.owner-profile-more-btn{
    width:22px;
    height:22px;
    color:var(--action);
}

.owner-profile-more-btn .icon-svg{
    width:22px;
    height:22px;
}

.owner-profile-more-btn:hover,
.owner-profile-more-btn:focus-visible{
    color:var(--primary);
}

/* =========================
   ACTION MENU
   ========================= */

.action-menu{
    position:fixed;
    z-index:10020;
    min-width:140px;
    padding:8px 0;
    border:1px solid var(--box-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.action-menu[hidden]{
    display:none;
}

.action-menu__button{
    display:block;
    width:100%;
    padding:10px 14px;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:14px;
    line-height:1.2;
    text-align:left;
    cursor:pointer;
}

.action-menu__button:hover{
    background:var(--box-bg);
    color:var(--primary);
}

/* =========================
   ACTION MENU
   ========================= */

.action-menu{
    position:fixed;
    z-index:10020;
    min-width:140px;
    padding:8px 0;
    border:1px solid var(--box-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.action-menu[hidden]{
    display:none;
}

.action-menu__button{
    display:block;
    width:100%;
    padding:10px 14px;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:14px;
    line-height:1.2;
    text-align:left;
    cursor:pointer;
}

.action-menu__button:hover{
    background:var(--box-bg);
    color:var(--primary);
}

/* =========================
   REPORT MODAL
   ========================= */

.report-modal[hidden]{
    display:none;
}

.report-modal{
    position:fixed;
    inset:0;
    z-index:10060;
}

.report-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    animation:reportModalBackdropIn .22s ease forwards;
}

.report-modal__panel{
    position:absolute;
    left:50%;
    bottom:0;
    top:auto;
    transform:translateX(-50%) translateY(100%);
    width:100%;
    max-width:420px;
    max-height:70vh;
    border-radius:20px 20px 0 0;
    background:#fff;
    box-shadow:var(--shadow);
    overflow:hidden;
    animation:reportModalSlideUp .26s ease forwards;
}

.report-modal__close{
    position:absolute;
    top:14px;
    right:14px;
    width:24px;
    height:24px;
    border:0;
    background:transparent;
    color:var(--action);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}

.report-modal__close:hover,
.report-modal__close:focus-visible{
    color:var(--primary);
}

.report-modal__content{
    padding:28px 20px 20px;
    max-height:70vh;
    overflow-y:auto;
}

.report-modal__content h3{
    margin:0 0 10px;
    color:var(--primary);
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.report-modal__text{
    margin:0 0 16px;
    color:var(--text);
    font-size:14px;
    line-height:1.45;
}

.report-modal__label{
    display:block;
    margin:0 0 8px;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}

.report-modal__form select{
    width:100%;
    height:52px;
    margin-bottom:14px;
    padding:0 14px;
    border:1px solid #d8d8d8;
    border-radius:16px;
    background:var(--box-bg);
    color:#333;
    font-size:14px;
    font-family:'Google Sans', Arial, sans-serif;
    outline:none;
}

.report-modal__form textarea{
    width:100%;
    min-height:100px;
    margin-bottom:16px;
    resize:vertical;
}

.report-modal__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

@keyframes reportModalBackdropIn{
    from{ opacity:0; }
    to{ opacity:1; }
}

@keyframes reportModalSlideUp{
    from{
        transform:translateX(-50%) translateY(100%);
    }
    to{
        transform:translateX(-50%) translateY(0);
    }
}

/* =========================
   OWNER PROFILE ACTION ROW
   ========================= */

.owner-profile-name-row--actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
}

.owner-profile-name-row-left{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
}

.owner-profile-name-row-right{
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.owner-profile-more-btn{
    width:22px;
    height:22px;
    color:var(--action);
}

.owner-profile-more-btn .icon-svg{
    width:22px;
    height:22px;
}

.owner-profile-more-btn:hover,
.owner-profile-more-btn:focus-visible{
    color:var(--primary);
}

.action-menu{
    position:fixed;
    z-index:10020;
    min-width:140px;
    padding:28px 0 8px;
    border:1px solid var(--box-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
}

.action-menu__close{
    position:absolute;
    top:8px;
    right:8px;
    width:18px;
    height:18px;
    padding:0;
    border:0;
    background:transparent;
    color:var(--action);
    font-size:16px;
    line-height:1;
    cursor:pointer;
}

.action-menu__close:hover,
.action-menu__close:focus-visible{
    background:transparent;
    color:var(--primary);
    outline:none;
    box-shadow:none;
}

.post-grid-card__text-head{
    display:flex;
    align-items:center;
    gap:8px;
}

.post-grid-card__text-head .post-grid-card__username{
    flex:1;
    min-width:0;
}

.post-grid-card__more-btn{
    color:#ffffff;
    flex:0 0 auto;
    margin-right:-10px;
}

.post-grid-card__more-btn:hover,
.post-grid-card__more-btn:focus-visible{
    color:#ffffff;
}

.report-success-box{
    padding-top:4px;
}

.report-success-copy{
    margin:0;
    color:var(--text);
    font-size:14px;
    line-height:1.45;
    text-align:center;
}

/*===========================
   SAVED GRID
=============================*/

.section-saved-grid{
    padding:20px 20px 30px 20px;
}

.saved-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px 8px;
    margin-top:-6px;
}

.saved-grid-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
}

.saved-grid-card__media{
    display:block;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 150px;
    aspect-ratio:1 / 1;
    border-radius:50%;
    overflow:hidden;
    background:#d9d9d9;
    transition:transform .18s ease;
}

.saved-grid-card__media:hover{
    transform:scale(1.05);
    border: 1px solid var(--primary);
}

.saved-grid-card__text{
    width:100%;
    max-width:150px;
    margin-top:4px;
    text-align:center;
    color:inherit;
    text-decoration:none;
}

.saved-grid-card__title-line{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    line-clamp:1;
    -webkit-line-clamp:1;
    white-space:normal;
}

.saved-grid-card__title-line--primary{
    color:var(--pet-title);
    font-size:13px;
    font-weight:700;
    line-height:1.15;
    margin-bottom:1px;
}

.saved-grid-card__title-line--secondary{
    color:var(--text);
    font-size:11px;
    line-height:1.2;
    min-height:26px;
}

.saved-grid-card__label{
    font-weight:700;
}

.saved-grid-card__image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.saved-grid-card__image--placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:linear-gradient(135deg, #e8e8e8, #d6d6d6);
    color:#7d7d7d;
    font-size:22px;
    font-weight:700;
}

.saved-grid-card__actions{
    width:110px;
    margin-top: 6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0px;
}

.saved-grid-card__action{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    min-width:0;
    flex:0 0 auto;
}

.saved-grid-card__action .icon-btn{
    width:16px;
    height:16px;
}

.saved-grid-card__action .icon-btn svg,
.saved-grid-card__action .icon-svg{
    width:14px;
    height:14px;
}

.saved-grid-card__action .icon-btn--like{
    width:18px;
    height:18px;
    margin:0;
}

.saved-grid-card__action .icon-btn--more{
    width:16px;
    height:16px;
    font-size:16px;
}

.saved-grid-card__action .icon-count{
    margin:0 0 0 -2px;
    font-size:9px;
    line-height:1;
}

.add-pet-plus--video{
    font-size: 30px;
}

/* =========================
   SETTINGS PAGE
========================= */
.settings-page .add-pet-form-wrap{
    padding-top:0;
}

.settings-avatar-section{
    position:relative;
    width:100%;
    padding:24px 20px 10px;
    background:transparent;
    overflow:visible;
}

.settings-avatar-wrap{
    position:relative;
    width:120px;
    margin:0 auto;
}

.settings-avatar-trigger{
    display:block;
    width:200px;
    height:200px;
    border-radius:50%;
    overflow:hidden;
    cursor:pointer;
    background:#e7e7e7;
    box-shadow: 0 10px 10px rgba(0,0,0,0.15);
    margin-left: -40px;
}

.settings-avatar-image{
    width:200px !important;
    height:200px !important;
    max-height:none !important;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
}

.settings-avatar-placeholder{
    width:200px;
    height:200px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e7e7e7;
    color:#7d7d7d;
    font-size:42px;
    font-weight:700;
}

.settings-avatar-close{
    position:absolute;
    top:-8px;
    right:-24px;
    color:var(--active) !important;
}

.settings-avatar-delete{
    position:absolute;
    right:-24px;
    bottom:-8px;
    color:var(--active) !important;
}

.settings-avatar-close:hover,
.settings-avatar-close:focus-visible,
.settings-avatar-delete:hover,
.settings-avatar-delete:focus-visible{
    color:var(--primary) !important;
    transform:scale(1.05);
}

.settings-avatar-close .icon-svg,
.settings-avatar-delete .icon-svg{
    width:22px;
    height:22px;
    filter:none;
}

.settings-avatar-note{
    margin:16px 0 0;
    text-align:center;
}

.settings-static-row{
    margin:0 0 8px;
    color:var(--text);
    font-size:14px;
    line-height:1.35;
}

.settings-static-label{
    color:#666666;
    font-weight:700;
    margin-right:6px;
}

.settings-static-value{
    color:#7a7a7a;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.settings-choice-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:14px;
}

.settings-choice-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 16px;
    border:1px solid #d8d8d8;
    border-radius:14px;
    background:var(--box-bg);
    color:var(--text);
    font-size:14px;
    line-height:1.35;
    cursor:pointer;
}

.settings-choice-item input[type="radio"]{
    margin-top:2px;
    accent-color:#08d248;
    flex:0 0 auto;
}

.settings-toggle-list{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.settings-toggle-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.settings-toggle-copy{
    flex:1;
    min-width:0;
}

.settings-toggle-title{
    color:var(--text);
    font-size:14px;
    line-height:1.35;
}

.settings-switch{
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
    cursor:pointer;
}

.settings-switch__input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.settings-switch__track{
    position:relative;
    display:block;
    width:61px;
    height:27px;
    border-radius:999px;
    background:#dedede;
    box-shadow:inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -1px 3px rgba(0,0,0,0.08);
    transition:background .2s ease;
}

.settings-switch__thumb{
    position:absolute;
    top:2.5px;
    left:2.5px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#ffffff;
    box-shadow:0 4px 10px rgba(0,0,0,0.16);
    transition:transform .2s ease;
}

.settings-switch__label{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:9px;
    font-weight:700;
    letter-spacing:0.5px;
    transition:opacity .2s ease, color .2s ease;
    user-select:none;
}

.settings-switch__label--off{
    right:8px;
    color:#b2b2b2;
    opacity:1;
}

.settings-switch__label--on{
    left:8px;
    color:rgba(255,255,255,0.78);
    opacity:0;
}

.settings-switch__input:checked + .settings-switch__track{
    background:#08d248;
}

.settings-switch__input:checked + .settings-switch__track .settings-switch__thumb{
    transform:translateX(34px);
}

.settings-switch__input:checked + .settings-switch__track .settings-switch__label--off{
    opacity:0;
}

.settings-switch__input:checked + .settings-switch__track .settings-switch__label--on{
    opacity:1;
}

.settings-switch__input:focus-visible + .settings-switch__track{
    outline:2px solid var(--action);
    outline-offset:2px;
}

@media (max-width:420px){
    .settings-switch__track{
        width:61px;
        height:27px;
    }

    .settings-switch__thumb{
        width:22px;
        height:22px;
    }

    .settings-switch__input:checked + .settings-switch__track .settings-switch__thumb{
        transform:translateX(34px);
    }

    .settings-switch__label{
        font-size:9px;
    }
}

/*============================
        SITE CREDITS
==============================*/
.site-credit {
    width: 100%;
    max-width: 520px;
    margin: 18px auto 72px;
    padding: 0 16px;
    text-align: center;
    font-size: 10px;
    line-height: 1.2;
    color: var(--text);
    opacity: 0.45;
}

.site-credit a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.menu-credit {
    margin-top: 18px;
    padding: 0x;
    font-size: 9px;
    line-height: 1.2;
    color: var(--text);
    opacity: 0.45;
    text-align: left;
}

.menu-credit a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

/*==============================
        PHONE VERIFIED ICON
===============================*/
.phone-verified-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.phone-verified-status::before {
    content: "✓";
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20%;
    background: #08d248;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/*================================
        MESSAGES BADGE COUNTER
==================================*/
.menu-icon-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
}

.menu-icon-wrap .menu-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.menu-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* =========================================================
   MESSAGES PAGE
========================================================= */
.messages-page {
    padding-bottom: 18px;
}

.messages-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 0 16px;
}

.messages-tab {
    min-height: 42px;
    border-radius: 999px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.messages-tab span {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(189, 30, 81, 0.1);
    color: var(--primary);
    font-size: 11px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
}

.messages-tab.is-active {
    background: var(--muted);
    color: #fff;
}

.messages-tab.is-active span {
    background: #fff;
    color: var(--primary);
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.messages-card {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.messages-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.messages-card__avatar-link {
    text-decoration: none;
    flex: 0 0 auto;
}

.messages-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(189, 30, 81, 0.08);
    color: var(--primary);
    font-weight: 800;
}

.messages-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.messages-card__avatar-placeholder {
    font-size: 18px;
    line-height: 1;
}

.messages-card__sender {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.messages-card__direction {
    color: #8a8a8a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.messages-card__name {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.messages-card__username,
.messages-card__date,
.messages-card__status {
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.25;
}

.messages-card__body {
    color: var(--text);
    font-size: 14px;
    line-height: 1.45;
    background: #f8f8f8;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.messages-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.messages-card__source-link,
.messages-card__reply-btn {
    border: 0;
    background: transparent;
    color: var(--viewall);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.messages-card__reply-btn {
    color: var(--primary);
}

.messages-card.is-unread {
    border: 1px solid rgba(66, 102, 84, 0.35);
    box-shadow: 0 8px 22px rgba(66, 102, 84, 0.16);
}

.messages-card__unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    min-width: 28px;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 16px;
    text-transform: uppercase;
}

.messages-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.messages-summary {
    margin: 0;
    color: var(--viewall);
    font-size: 13px;
    font-weight: 800;
    flex: 1;
}

.messages-mark-all-btn {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.messages-mark-all-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.menu-icon-svg {
    width: 20px;
    height: 20px;
    color: currentColor;
    flex: 0 0 auto;
}

/* =========================================================
   NOTIFICATIONS PAGE
========================================================= */
.notifications-page {
    padding-bottom: 18px;
}

.notifications-summary {
    margin: 0 0 14px;
    color: var(--viewall);
    font-size: 13px;
    font-weight: 800;
}

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notifications-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

.notifications-card.is-unread {
    border: 1px solid rgba(66, 102, 84, 0.35);
    box-shadow: 0 8px 22px rgba(66, 102, 84, 0.16);
}

.notifications-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notifications-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(189, 30, 81, 0.08);
    color: var(--primary);
    font-weight: 800;
    flex: 0 0 auto;
}

.notifications-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notifications-card__avatar-placeholder {
    font-size: 18px;
    line-height: 1;
}

.notifications-card__content {
    min-width: 0;
    flex: 1;
}

.notifications-card__topline {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.notifications-card__title {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.notifications-card__date {
    display: block;
    margin-top: 3px;
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.25;
}

.notifications-card__unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    line-height: 16px;
    text-transform: uppercase;
}

.notifications-card__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.notifications-card__link {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.notifications-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

.notifications-toolbar .notifications-summary {
    margin: 0;
    flex: 1;
}

.notifications-mark-all-btn {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
}

.notifications-mark-all-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* =========================================================
   CARD TRASH BUTTONS - MESSAGES / NOTIFICATIONS
========================================================= */
.card-trash-btn {
    width: 28px !important;
    height: 28px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--primary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.card-trash-btn .card-trash-icon {
    width: 18px !important;
    height: 18px !important;
    color: var(--primary) !important;
    stroke: var(--primary) !important;
    fill: none !important;
    display: block !important;
    opacity: 1 !important;
}

.card-trash-btn .card-trash-icon path {
    stroke: var(--primary) !important;
    fill: none !important;
    opacity: 1 !important;
}

.card-trash-btn:hover {
    background: transparent !important;
    color: var(--primary) !important;
    opacity: 0.75 !important;
}

.card-trash-btn:disabled {
    opacity: 0.5 !important;
    cursor: default !important;
}

.notifications-card__actions,
.messages-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notifications-card__actions .card-trash-btn,
.messages-card__actions .card-trash-btn {
    margin-left: auto;
}

/* =========================================================
   USER STOCK AVATAR HORIZONTAL SELECTOR
========================================================= */

.user-stock-avatar-scroll-wrap {
    position: relative;
    width: 100%;
    padding: 0;
    overflow: visible;
}

[data-user-stock-avatar-grid] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 38px 12px 2px;
    margin: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

[data-user-stock-avatar-grid]::-webkit-scrollbar {
    height: 4px;
}

[data-user-stock-avatar-grid]::-webkit-scrollbar-track {
    background: transparent;
}

[data-user-stock-avatar-grid]::-webkit-scrollbar-thumb {
    background: rgba(189, 30, 81, 0.35);
    border-radius: 999px;
}

[data-user-stock-avatar-grid] .add-pet-image-slot {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-user-stock-avatar-grid] .add-pet-image-slot:hover,
[data-user-stock-avatar-grid] .add-pet-image-slot:focus-visible {
    transform: scale(1.18);
    z-index: 2;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(189, 30, 81, 0.18);
}

[data-user-stock-avatar-grid] .add-pet-image-slot.is-active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(189, 30, 81, 0.22);
}

[data-user-stock-avatar-grid] .add-pet-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-stock-avatar-nav {
    position: absolute;
    top: 50%;
    z-index: 4;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(189, 30, 81, 0.88);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.user-stock-avatar-nav:hover {
    background: var(--pet-title);
}

.user-stock-avatar-nav--prev {
    left: 0;
}

.user-stock-avatar-nav--next {
    right: 2px;
}

.user-stock-avatar-nav[hidden] {
    display: none !important;
}

/* =========================================================
   VIDEO LOADING PLACEHOLDER
========================================================= */

.featured-post__image,
.featured-bud-card .featured-post__image {
    background: #d9d9d9;
}

.featured-post__video,
.featured-bud-card .featured-post__video,
video.pet-profile-hero-image,
video.owner-profile-hero-image {
    background: #d9d9d9;
}

/* ================================
    OWNER PROFILE PET HORIZONTAL 
===================================*/
.owner-profile-pet-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
}

.owner-profile-pet-scroll::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   OWNER PROFILE MY PETS NAV
========================================================= */

.owner-profile-pets-section {
    position: relative;
}

.owner-profile-pet-scroll {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 0 4px 4px;
}

.owner-profile-pet-scroll .owner-profile-pet-card {
    scroll-snap-align: start;
}

.owner-profile-pet-nav {
    position: absolute;
    top: 80px;
    z-index: 5;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.owner-profile-pet-nav--prev {
    left: 8px;
}

.owner-profile-pet-nav--next {
    right: 8px;
}

.owner-profile-pet-nav:hover {
    background: var(--primary);
}

.owner-profile-pet-nav[hidden] {
    display: none !important;
}


/*================================
        CREATE STORY
=================================*/
.create-story-page .add-pet-form-wrap{
    padding-top:26px;
}

.create-story-hero{
    width:100%;
}

.create-story-upload-actions{
    justify-content:center;
}

.create-story-upload-card{
    border:0;
    background:transparent;
}

.create-story-pet-slider{
    position:relative;
}

.create-story-pet-grid{
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
}

.create-story-pet-card{
    border:0;
    background:transparent;
    padding:0;
    flex:0 0 auto;
}

.create-story-pet-card .owner-profile-pet-image-wrap{
    border:2px solid transparent;
    transition:border-color .2s ease, transform .2s ease;
}

.create-story-pet-card.is-active .owner-profile-pet-image-wrap{
    border-color:var(--primary);
}

.create-story-pet-card:hover .owner-profile-pet-image-wrap{
    border-color:var(--primary);
}

.create-story-pet-card.is-active .owner-profile-pet-name{
    color:var(--primary);
}

.create-story-page .char-count{
    display:flex;
    justify-content:flex-end;
    margin-top:6px;
    font-size:12px;
    color:#707070;
}

.create-story-pet-picker .owner-profile-pet-nav{
    top:41px !important;
    transform:translateY(-50%);
}

.create-story-pet-picker .owner-profile-pet-nav--prev{
    left:-6px !important;
}

.create-story-pet-picker .owner-profile-pet-nav--next{
    right:-6px !important;
}

.create-story-pet-picker{
    position:relative;
}

.create-story-pet-slider{
    position:relative;
}

/* =========================================================
   MY PETS ADD CARD
========================================================= */

.my-pets-add-card {
    min-height: 80px;
    margin-top: -50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border: 0px solid var(--box-border);
    border-radius: 8px;
}

.my-pets-add-card .owner-profile-pet-image-wrap {
    margin-bottom: 8px;
}

/*==================================================
    SUGGESTED MEMBER INVITES
===================================================*/
.group-suggested-invite-btn{
    height: 28px;
    font-size: 12px;
}
/* =========================
   STORIES VIEWER
   ========================= */
.story-modal[hidden]{
    display:none;
}

.story-modal{
    position:fixed;
    inset:0;
    left:50%;
    width:100%;
    max-width:520px;
    transform:translateX(-50%);
    z-index:10020;
}

.story-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.92);
}

.story-modal__panel{
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
    background:#000;
}

.story-modal__media-wrap{
    position:absolute;
    inset:0;
}

.story-modal__image,
.story-modal__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.story-modal__video{
    display:none;
}

.story-modal__tap-zone{
    position:absolute;
    top:0;
    bottom:0;
    width:35%;
    padding:0;
    border:0;
    background:transparent;
    z-index:2;
    cursor:pointer;
}

.story-modal__tap-zone--prev{
    left:0;
}

.story-modal__tap-zone--next{
    right:0;
    width:65%;
}

.story-modal__progress{
    position:absolute;
    top:12px;
    left:12px;
    right:12px;
    z-index:7;
    display:flex;
    gap:4px;
}

.story-modal__progress-bar{
    flex:1;
    height:3px;
    border-radius:999px;
    overflow:hidden;
    background:rgba(255,255,255,0.28);
}

.story-modal__progress-fill{
    display:block;
    width:0%;
    height:100%;
    background:#ffffff;
}

.story-modal__top{
    position:absolute;
    top:24px;
    left:16px;
    right:16px;
    z-index:7;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.story-modal__pet{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.story-modal__avatar-link{
    flex:0 0 auto;
}

.story-modal__avatar{
    display:block;
    width:42px;
    height:42px;
    border:2px solid rgba(255,255,255,0.95);
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,0.16);
}

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

.story-modal__meta{
    min-width:0;
}

.story-modal__name,
.story-modal__time{
    display:block;
    color:#ffffff;
    text-shadow:0 1px 4px rgba(0,0,0,0.45);
}

.story-modal__name{
    font-size:14px;
    font-weight:700;
    line-height:1.2;
}

.story-modal__time{
    margin-top:2px;
    font-size:12px;
    line-height:1.2;
    opacity:0.92;
}

.story-modal__close{
    position:relative;
    z-index:8;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    background:transparent;
    color:rgba(255,255,255,0.9);
    font-size:26px;
    line-height:1;
    cursor:pointer;
    text-shadow:0 1px 4px rgba(0,0,0,0.45);
}
.story-modal__close:hover{
    color:var(--primary);
}

.story-modal__title-wrap{
    position:absolute;
    left:20px;
    right:20px;
    bottom:34%;
    z-index:6;
}

.story-modal__title-wrap h3{
    margin:0;
    color:#ffffff;
    font-size:22px;
    font-weight:700;
    line-height:1.15;
    text-shadow:0 2px 10px rgba(0,0,0,0.45);
}

.story-modal__bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:7;
    padding:64px 20px 20px;
    background:linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.72) 35%,
        rgba(0, 0, 0, 0.18) 72%,
        rgba(0, 0, 0, 0) 100%
    );
}

.story-modal__bottom{
    display:flex;
    flex-direction:column;
}

.story-modal__footer{
    margin-bottom:12px;
}

.story-modal__actions{
    width:100%;
}

.story-modal__actions .icon-row.post-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}

.story-modal__actions .post-actions__left{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:20px !important;
    flex-wrap:nowrap !important;
}

.story-modal__actions .post-actions__right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin-left:auto !important;
    padding:0 !important;
}

.story-modal__actions .post-action{
    display:inline-flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
}

.story-modal__actions .icon-btn{
    position:relative;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:24px;
    height:24px;
    flex:0 0 24px !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff !important;
}

.story-modal__actions .icon-btn--like{
    width:28px;
    height:28px;
    flex:0 0 28px !important;
}

.story-modal__actions .icon-count,
.story-modal__actions .action-icon,
.story-modal__actions .like-icon,
.story-modal__actions svg{
    color:#fff !important;
    stroke:#fff;
}

.story-modal__actions .icon-count{
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:13px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    color:#fff !important;
}

.story-modal__actions .post-action--like .icon-count,
.story-modal__actions .post-action--comment .icon-count{
    margin-left:5px !important;
}

.story-modal__actions .icon-btn--like.is-active,
.story-modal__actions .icon-btn--like.is-active svg{
    color:#ff4d6d !important;
    stroke:#ff4d6d;
}

.story-modal__footer{
    display:flex;
    justify-content:flex-end;
    margin-top:16px;
}

.story-modal__follow{
    min-width:108px;
}

.create-story-pet-slider .owner-profile-pet-nav{
    top:41px !important;
    transform:translateY(-50%);
}

.create-story-pet-slider .owner-profile-pet-nav--prev{
    left:-6px !important;
}

.create-story-pet-slider .owner-profile-pet-nav--next{
    right:-6px !important;
}

/*=================================
        CREATE STORY BLOCK
==================================*/
.create-story-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:20px;
}

.create-story-actions .auth-btn{
    width:100%;
}

.create-story-cancel-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ececec;
    color:var(--text);
}

.create-story-cancel-btn:hover{
    background:#d8d8d8;
    color:var(--text);
}

.create-story-preview-btn{
    background:var(--muted);
}

.create-story-preview-btn:hover{
    background:var(--text);
}

.create-story-preview-modal[hidden]{
    display:none;
}

.create-story-preview-modal{
    position:fixed;
    inset:0;
    z-index:10030;
}

.create-story-preview-modal__backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.65);
}

.create-story-preview-modal__panel{
    position:absolute;
    top:74px;
    bottom:60px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    max-width:420px;
    background:#000;
    overflow:hidden;
}

.create-story-preview-modal__close{
    position:absolute;
    top:16px;
    right:16px;
    z-index:5;
    width:28px;
    height:28px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.create-story-preview-modal__media{
    position:absolute;
    inset:0;
}

.create-story-preview-modal__image,
.create-story-preview-modal__video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.create-story-preview-modal__bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:26px 20px 20px;
    background:linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.58) 48%, rgba(0,0,0,0) 100%);
    color:#fff;
}

.create-story-preview-modal__pet{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
}

.create-story-preview-modal__avatar{
    width:54px;
    height:54px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.15);
    flex:0 0 54px;
}

.create-story-preview-modal__avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.create-story-preview-modal__meta strong{
    display:block;
    font-size:14px;
    color:#fff;
}

.create-story-preview-modal__caption{
    margin:0 0 18px;
    font-size:16px;
    line-height:1.35;
    color:#fff;
}

.create-story-preview-modal__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.create-story-preview-modal__actions .auth-btn{
    width:100%;
}

.create-story-preview-back-btn{
    background:#ececec;
    color:var(--text);
}

.create-story-preview-back-btn:hover{
    background:#d8d8d8;
    color:var(--text);
}

/* CREATE STORY PREVIEW / HERO OVERRIDES */
.create-story-hero-preview{
    cursor:pointer;
}

.create-story-preview-modal__bottom{
    padding:120px 20px 20px;
}

.create-story-preview-modal__caption{
    position:absolute;
    top:24px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 40px);
    margin:0;
    text-align:center;
    font-size:48px;
    line-height:1.02;
    font-weight:700;
    color:#ffffff;
    -webkit-text-stroke:4px #000000;
    paint-order:stroke fill;
    text-shadow:
        0 3px 10px rgba(0,0,0,0.85),
        0 0 2px rgba(0,0,0,0.95);
    z-index:3;
    pointer-events:none;
    overflow-wrap:anywhere;
}

.create-story-preview-modal__pet,
.create-story-preview-modal__actions{
    position:relative;
    z-index:4;
}

.story-modal__title-wrap{
    position:absolute;
    left:0;
    right:0;
    bottom:220px;
    z-index:22;
    width:100%;
    padding:0 20px;
    text-align:center;
    pointer-events:none;
}

.story-modal__title-wrap h3,
#storyTitle{
    margin:0;
    color:#ffffff;
    font-size:38px;
    line-height:1;
    font-weight:700;
    text-align:center;
    letter-spacing:1px;
    -webkit-text-stroke:6px #000000;
    paint-order:stroke fill;
    text-shadow:
        0 2px 6px rgba(0,0,0,0.75),
        0 0 2px rgba(0,0,0,0.95),
        2px 2px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
}

.story-modal__media-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

.story-modal__image,
.story-modal__video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#000;
}

.story-modal__video{
    z-index:1;
}

.story-modal__pet{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.story-modal__meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    min-width:0;
    padding-top:2px;
}

.story-modal__username{
    display:inline-flex;
    align-items:center;
    min-width:0;
    font-size:13px;
    line-height:1.1;
    font-weight:700;
    color:#ffffff;
    text-decoration:none;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.story-modal__username:hover{
    color:#ffffff;
    text-decoration:underline;
}

.story-modal__pet-line{
    display:flex;
    align-items:baseline;
    gap:4px;
    min-width:0;
    color:#ffffff;
}

.story-modal__name{
    min-width:0;
    font-size:14px;
    line-height:1.1;
    font-weight:700;
    color:#ffffff;
    text-decoration:none;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.story-modal__name:hover{
    color:#ffffff;
    text-decoration:underline;
}

.story-modal__dash{
    font-size:13px;
    line-height:1;
    color:#ffffff;
    opacity:.9;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.story-modal__time{
    font-size:13px;
    line-height:1.1;
    font-style:italic;
    font-weight:400;
    color:#ffffff;
    opacity:.95;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

#auth-warning-modal,
.auth-warning-modal{
    position:fixed !important;
    inset:0 !important;
    z-index:10060 !important;
}

.auth-warning-modal.is-open{
    opacity:1;
    visibility:visible;
}

.auth-warning-box{
    position:relative;
    z-index:10061 !important;
}

/*=========================================
        ASTORY ARCHIVED
=========================================*/
.story-archive-card .post-grid-card__media{
    height:360px;
    border-radius:8px;
    overflow:hidden;
}

.story-archive-card__date{
    position:absolute;
    top:8px;
    left:8px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    background:rgba(0,0,0,0.58);
    color:#ffffff;
    font-size:11px;
    font-weight:600;
    line-height:1;
}

.story-archive-card__play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:2;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0,0,0,0.42);
    color:#ffffff;
    font-size:14px;
    line-height:1;
    pointer-events:none;
}

.story-archive-card .post-grid-card__title,
.story-archive-card .post-grid-card__subtitle{
    color:#ffffff;
    text-shadow:0 1px 3px rgba(0,0,0,0.45);
}

.story-archive-card .post-grid-card__title{
    font-size:14px;
    font-weight:700;
    line-height:1.1;
}

.story-archive-card .post-grid-card__subtitle{
    margin-top:4px;
    font-size:12px;
    font-weight:400;
    line-height:1.25;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
}

.story-archive-card video.post-grid-card__image{
    background:#d9d9d9;
}

.story-archive-card__video-wrap{
    position:relative;
    width:100%;
    height:100%;
}

.story-archive-card__video-wrap .post-grid-card__image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#000;
}

.story-archive-card__video-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:8;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:rgba(0,0,0,0.55);
    color:#fff;
    font-size:18px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    pointer-events:auto;
}

.story-archive-card__video-play.is-playing{
    display:none;
}

/*=================================
        MENU LEGAL LINKS
==================================*/
.mobile-menu__nav{
    min-height:100%;
}

.menu-legal{
    margin-top:6px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,0.12);
}

.menu-divider{
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid rgba(255,255,255,0.12);
}

.menu-legal__link{
    display:block;
    color:rgba(255,255,255,0.5)!important;
    font-size:10px !important;
    line-height:2;
    font-weight:300;
    margin-top:0px;
}

.menu-legal__link:hover{
    color:#ffffff !important;
    opacity:1 !important;
}

/*==============================
        LEGAL STYLEs
==============================*/
.legal-page, .faq-section{
    padding: 0 20px;
}
.legal-page p, .legal-list, .faq-section p{
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--text)
}

.legal-list{
    margin-left: -16px;
}

.legal-list li a:hover{
    color: var(--primary);
}

.legal-page h, .faq-section h3{
    font-size: 16px!important;
    font-weight: 600 !important;
    color: var(--primary)!important;
    letter-spacing: 0.1px;
    padding-top: 16px !important;
}

.legal-page h4{
    font-size: 14px!important;
    font-weight: 600 !important;
    color: var(--pet-title)!important;
    line-height: 1;
}

.legal-page h4 p{
    margin-top: -20px !important;
}

.legal-page--legal-center h3 a:hover{
    color: var(--primary);
}

/* Help & FAQs Page */
.faq-page {
    padding-bottom: 90px;
}

.faq-section {
    margin-top: 22px;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid rgba(112, 112, 112, 0.18);
    border-radius: 14px;
    overflow: hidden;
}

.faq-item h4 {
    margin: 0;
}

.faq-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    color: #707070;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--pb-font);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    padding: 14px;
    text-align: left;
}

.faq-toggle:hover,
.faq-toggle:focus {
    color: #BD1E51;
    outline: none;
}

.faq-icon {
    align-items: center;
    background: #F1B814;
    border-radius: 999px;
    color: #BD1E51;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 18px;
    font-weight: 400;
    height: 24px;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    width: 24px;
}

.faq-answer {
    border-top: 1px solid rgba(112, 112, 112, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

.faq-answer-inner {
    padding: 14px;
}

.faq-answer-inner p:first-child {
    margin-top: 0;
}

.faq-answer-inner p:last-child {
    margin-bottom: 0;
}

.faq-item.is-open .faq-icon {
    background: #BD1E51;
    color: #ffffff;
    transform: rotate(180deg);
}

.faq-help-box {
    background: rgba(241, 184, 20, 0.14);
    border: 1px solid rgba(189, 30, 81, 0.18);
    border-radius: 16px;
    padding: 16px;
    max-width: 380px;
    margin: 20px auto 0;
}

/* Group Invites Page */
.group-invites-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.group-invite-card {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 12px;
    padding-top: 12px;
}

.group-invites-list .group-invite-card:not(:last-child) {
    border-bottom: 1px solid rgba(112, 112, 112, 0.18);
}

.group-invite-card__avatar-link {
    flex: 0 0 90px;
    height: 90px;
    text-decoration: none;
    width: 90px;
}

.group-invite-card__avatar {
    border-radius: 50%;
    display: block;
    height: 90px;
    object-fit: cover;
    width: 90px;
}

.group-invite-card__avatar--placeholder {
    align-items: center;
    background: rgba(112, 112, 112, 0.12);
    color: #707070;
    display: flex;
    font-size: 28px;
    justify-content: center;
}

.group-invite-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.group-invite-card__title {
    color: #707070;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-invite-card__meta {
    color: #707070;
    font-size: 12px;
    line-height: 1.2;
}

.group-invite-card__actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

.group-invite-action-btn {
    border: 0;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
    white-space: nowrap;
}

.group-invite-action-btn--accept {
    background: #BD1E51;
}

.group-invite-action-btn--accept:hover{
    background: var(--viewall);
}

.group-invite-action-btn--secondary {
    background: var(--muted);
}
.group-invite-action-btn--secondary:hover{
    background: var(--text);
}
/* =========================
   ACTION MENU ABOVE COMMENTS/STORIES
   =========================
   Comments can open above the story viewer. Keep the small Report
   action menu above comments, and keep the full report modal above it.
*/
.action-menu{
    z-index:10055 !important;
}

.report-modal{
    z-index:10070 !important;
}

.report-modal__panel{
    z-index:10071;
}


/* =========================================================
   VIDEO SOUND TOGGLE
========================================================= */
.pb-video-sound-shell {
    position: relative;
}

.pb-video-sound-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid white;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    height: 34px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    z-index: 78;
    margin-top: 48px;
}

.pb-video-sound-toggle.is-sound-on {
    background: transparent;
    border: 1px solid white;
}

.pb-video-sound-toggle:hover,
.pb-video-sound-toggle:focus-visible {
    background: var(--primary);
    outline: none;
}

.viewer-modal__media-wrap .pb-video-sound-toggle,
.story-modal__media-wrap .pb-video-sound-toggle {
    right: 18px;
    top: 72px;
    z-index: 78;
}

/* =========================
   VIEWER DESCRIPTION CLAMP
========================= */

#viewerText #viewerDescription.viewer-description--clamped{
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-height:calc(1.45em * 3) !important;
}

/*=========================================================
   COPYRIGHT
==========================================================*/
.copyright-notice{
    margin-top: 30px;
    text-align: left;;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 400;
    color: white;
}

/* Signup success warning */
#auth-warning-modal.auth-warning-modal--success .auth-warning-title {
    color: #168957;
}

#auth-warning-modal.auth-warning-modal--success .auth-warning-text {
    color: var(--text);
}

#auth-warning-modal.auth-warning-modal--success .auth-warning-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
}

#auth-warning-modal.auth-warning-modal--success .auth-warning-box,
#auth-warning-modal.auth-warning-modal--success .auth-warning-card,
#auth-warning-modal.auth-warning-modal--success .auth-warning-content {
    border-color: rgba(22, 137, 87, 0.28);
    box-shadow: 0 18px 40px rgba(22, 137, 87, 0.22);
}

/* Add Pet success overlay */
.add-pet-success-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 22px;
    position: fixed;
    transition: opacity 0.2s ease;
    z-index: 9999;
}

.add-pet-success-overlay.is-open {
    opacity: 1;
}

.add-pet-success-overlay[hidden] {
    display: none;
}

.add-pet-success-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
    max-width: 360px;
    padding: 32px 24px 26px;
    position: relative;
    text-align: center;
    width: 100%;
}

.add-pet-success-card h2 {
    color: #168957;
    font-size: 28px;
    line-height: 1;
    margin: 0 0 12px;
}

.add-pet-success-main {
    color: #2f2f2f;
    font-size: 18px;
    font-weight: 500;
    margin: 0 0 10px;
}

.add-pet-success-copy {
    color: #707070;
    font-size: 14px;
    line-height: 1.45;
    margin: 0 0 22px;
}

.add-pet-success-close, .engagement-campaign-close {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 600;
    height: 34px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
}

.add-pet-success-close:hover,
.engagement-campaign-close:hover,
.engagement-campaign-close:focus-visible {
    color: var(--viewall);
    outline: none;
}

.add-pet-success-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-pet-success-cta {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    max-width: 230px;
    text-decoration: none;
}

/* =========================================================
   ENGAGEMENT CAMPAIGN POPUP
========================================================= */
.engagement-campaign-overlay {
    align-items: center;
    background: rgba(0, 0, 0, 0.62);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 22px;
    position: fixed;
    transition: opacity 0.2s ease;
    z-index: 10080;
}

.engagement-campaign-overlay.is-open {
    opacity: 1;
}

.engagement-campaign-overlay[hidden] {
    display: none;
}

.engagement-campaign-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    max-width: 360px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
}
/*
.engagement-campaign-close {
    align-items: center;
    background: var(--primary);
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-size: 16px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 34px;
    z-index: 2;
}

.engagement-campaign-close:hover,
.engagement-campaign-close:focus-visible {
    background: var(--viewall);
    outline: none;
}*/

.engagement-campaign-media {
    background: #ececec;
    height: 210px;
    overflow: hidden;
    width: 100%;
}

.engagement-campaign-media__item {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.engagement-campaign-content {
    padding: 30px 24px 26px;
}

.engagement-campaign-content h2 {
    color: var(--primary);
    font-size: 24px;
    line-height: 1.05;
    margin: 16px 0 12px;
}

.engagement-campaign-content p {
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
    margin: 0 0 22px;
}

.engagement-campaign-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.engagement-campaign-secondary {
    color: var(--viewall);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.engagement-campaign-secondary:hover {
    color: var(--primary);
    text-decoration: underline;
}

.engagement-campaign-cta {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
}

/* =========================================================
   PERFORMANCE LOADING POLISH
   ---------------------------------------------------------
   Keeps media areas dark while images/videos are loading,
   so delayed slider items do not flash white.
========================================================= */

.featured-post__image,
.featured-post__img,
.featured-bud-card .featured-post__image,
.featured-bud-card .featured-post__img,
.post-card .featured-post__image,
.post-card .featured-post__img {
    background: #000;
}

/* =========================================================
   PERFORMANCE LOADING POLISH
   ---------------------------------------------------------
   Keeps media areas dark while images/videos are loading,
   so delayed slider items do not flash white.
========================================================= */

.featured-bud-track,
.featured-bud-slide,
.featured-post__image,
.featured-post__img,
.featured-bud-card .featured-post__image,
.featured-bud-card .featured-post__img,
.featured-bud-card .featured-post__video,
.post-card .featured-post__image,
.post-card .featured-post__img,
.post-card .featured-post__video {
    background: #000;
}

.featured-post__image,
.featured-bud-card .featured-post__image,
.post-card .featured-post__image {
    aspect-ratio: 520 / 620;
}

/* =========================================================
   PETSBUDS MEDIA LOADING STATE
   ---------------------------------------------------------
   Shows a soft loading graphic while large images/videos load.
========================================================= */
.pb-media-loading,
.pb-media-loaded,
.pb-media-error{
    position:relative;
    background:#ececec;
}

.pb-media-loading::before,
.pb-media-error::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            110deg,
            #ececec 0%,
            #f7f7f7 18%,
            #ececec 36%
        );
    background-size:220% 100%;
    animation:pb-media-shimmer 1.2s ease-in-out infinite;
}

.pb-media-loading::after{
    content:"🐾";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    width:54px;
    height:54px;
    margin:-27px 0 0 -27px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.82);
    color:var(--primary)!important;
    font-size:22px;
    line-height:1;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
    pointer-events:none;
    animation:pb-media-pulse 1.05s ease-in-out infinite;
}

.pb-media-error::after{
    content:"Media unavailable";
    position:absolute;
    left:50%;
    top:50%;
    z-index:2;
    transform:translate(-50%, -50%);
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,0.9);
    color:var(--text);
    font-size:12px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
    pointer-events:none;
}

.pb-media-loading .featured-post__img,
.pb-media-loading .featured-post__video{
    opacity:0;
}

.pb-media-loaded .featured-post__img,
.pb-media-loaded .featured-post__video{
    opacity:1;
}

.pb-media-loading .featured-post__img,
.pb-media-loading .featured-post__video,
.pb-media-loaded .featured-post__img,
.pb-media-loaded .featured-post__video{
    transition:opacity .25s ease;
}

.pb-media-loaded::before,
.pb-media-loaded::after{
    display:none;
}

@keyframes pb-media-shimmer{
    0%{
        background-position:100% 0;
    }
    100%{
        background-position:-100% 0;
    }
}

@keyframes pb-media-pulse{
    0%,
    100%{
        transform:scale(1);
        opacity:.9;
    }
    50%{
        transform:scale(1.08);
        opacity:1;
    }
}

@media (prefers-reduced-motion: reduce){
    .pb-media-loading::before,
    .pb-media-loading::after,
    .pb-media-error::before{
        animation:none;
    }
}

/* ================================
   MEDIA LOADING PLACEHOLDER OVERRIDE
   - black background
   - large paw
   - no circle
   - no shadow
================================ */

.pb-media-loading{
    background:#000000 !important;
}

.pb-media-loading::before{
    display:none !important;
}

.pb-media-loading::after{
    width:auto !important;
    height:auto !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    color:#ffffff !important;
    font-size:64px !important;
    line-height:1 !important;
    content:"🐾" !important;
    margin-top:-82px !important;
}

.pb-media-loading.is-media-loaded::after,
.pb-media-loading.is-media-error::after{
    display:none !important;
}

.pb-media-loading .featured-post__img,
.pb-media-loading .featured-post__video{
    opacity:0;
}

.pb-media-loading.is-media-loaded .featured-post__img,
.pb-media-loading.is-media-loaded .featured-post__video{
    opacity:1;
}