/*
 * SYSTEM COMMENT: Shared public-side visual polish.
 * WHERE USED: Included by Home, PawDiscovery, PawAlert, Donation, Volunteer, About Us, and Profile pages.
 * PURPOSE: Makes the user/public side look more like a modern pet adoption website without changing module names or backend functions.
 */
:root{
  --pet-red:#e73549;
  --pet-blue:#1f66b1;
  --pet-green:#11975a;
  --pet-ink:#172033;
  --pet-muted:#667085;
  --pet-soft:#f3fbf6;
  --pet-card:#ffffff;
  --pet-line:#e5eef0;
  --pet-shadow:0 18px 45px rgba(23,32,51,.10);
}
body{
  background:
    radial-gradient(circle at 8% 6%, rgba(31,102,177,.10), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(17,151,90,.09), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f5faf8 50%,#ffffff 100%) !important;
  color:var(--pet-ink) !important;
}
.site-navbar{
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(229,238,240,.9);
  box-shadow:0 10px 28px rgba(23,32,51,.06) !important;
  position:sticky;
  top:0;
  z-index:1030;
}
.site-navbar .nav-link{font-weight:700 !important;letter-spacing:.01em;}
.site-navbar .nav-link.active,.site-navbar .nav-link:hover{color:var(--pet-red)!important;}
.profile-link{box-shadow:0 10px 22px rgba(23,32,51,.08);}
.profile-link:hover{transform:translateY(-2px);background:#fff !important;color:var(--pet-red)!important;}
.btn-danger,.btn.btn-danger,.sponsor-btn,.btn-donate{
  background:linear-gradient(135deg,#ff5b69,#df263b) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 12px 24px rgba(231,53,73,.22);
}
.btn-danger:hover,.btn.btn-danger:hover,.sponsor-btn:hover,.btn-donate:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(231,53,73,.28);}
.btn-light,.btn-outline-danger,.btn-outline-secondary,.btn-outline-success{
  border-radius:999px !important;
  font-weight:700 !important;
}
.home-section-card,.home-carousel-card,.home-support-card,.section-card,.donation-card,.story-card,.team-card,.page-header,.hero-card,.dashboard-card,.alert-card,.volunteer-card,.pet-card,.big-cta,.filter-box{
  border-color:var(--pet-line)!important;
  border-radius:28px!important;
  box-shadow:var(--pet-shadow)!important;
}
.home-support-card,.about-quick-card,.donation-stat,.manager-card,.alert-type-card,.role-card,.pet-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.home-support-card:hover,.about-quick-card:hover,.donation-stat:hover,.manager-card:hover,.alert-type-card:hover,.role-card:hover,.pet-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 55px rgba(23,32,51,.14)!important;
  border-color:rgba(17,151,90,.30)!important;
}
.home-support-card .icon-box,.about-quick-card i,.manager-card i,.donation-stat i,.alert-type-icon,.role-icon{
  background:linear-gradient(135deg,#eaf8ef,#dff4ff)!important;
  color:var(--pet-green)!important;
}
.mini-card img,.home-image,.sponsor-card img,.pet-thumb{
  border-radius:22px!important;
  transition:transform .24s ease, filter .24s ease;
}
.mini-card:hover img,.pet-card:hover .pet-thumb{transform:scale(1.025);filter:saturate(1.08);}
.mini-title,.pet-name,h1,h2,h3,h4,h5{color:var(--pet-ink);}
.home-kicker,.donation-kicker,.pet-site-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#eaf8ef;
  color:#087e49;
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  font-size:.88rem;
}
.pet-website-hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--pet-line);
  border-radius:34px;
  background:linear-gradient(135deg,#ffffff 0%,#effaf4 52%,#eef6ff 100%);
  box-shadow:var(--pet-shadow);
  padding:32px;
  margin-bottom:28px;
}
.pet-website-hero:before{
  content:"";
  position:absolute;
  right:-90px;
  top:-105px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(231,53,73,.10);
}
.pet-website-hero:after{
  content:"🐾";
  position:absolute;
  right:36px;
  bottom:22px;
  font-size:5rem;
  opacity:.08;
  transform:rotate(-12deg);
}
.pet-website-title{
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.02;
  font-weight:900;
  margin:12px 0;
}
.pet-website-subtitle{color:var(--pet-muted);font-size:1.02rem;line-height:1.75;max-width:720px;}
.pet-hero-chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.pet-hero-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #e7eef0;border-radius:999px;padding:10px 14px;font-weight:800;color:#344054;box-shadow:0 8px 18px rgba(23,32,51,.06);}
.pet-hero-chip i{color:var(--pet-green);}
.status-filter-row .form-control,.status-filter-row .form-select,.form-control,.form-select{
  border-radius:14px!important;
  border-color:#d7e1e5!important;
}
.status-filter-row .form-control:focus,.status-filter-row .form-select:focus,.form-control:focus,.form-select:focus{
  border-color:rgba(17,151,90,.55)!important;
  box-shadow:0 0 0 4px rgba(17,151,90,.11)!important;
}
.pet-type-toggle{background:#f8fbf9;border:1px solid #e5eef0;border-radius:16px;padding:6px;gap:6px!important;}
.pet-type-toggle .btn-filter{height:44px!important;border-radius:12px!important;border:0!important;font-weight:800!important;}
.pet-type-toggle .btn-filter.active{box-shadow:0 10px 18px rgba(17,151,90,.18);}
.site-footer{border-top-left-radius:34px;border-top-right-radius:34px;}
@media(max-width:768px){
  .pet-website-hero{padding:24px;border-radius:26px;}
  .pet-hero-chip{font-size:.86rem;}
  .site-navbar{position:relative;}
}


/* Footer readability fix: keep footer text visible on dark footer backgrounds. */
.site-footer,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer li,
.site-footer span {
  color: #ffffff !important;
}
.site-footer a {
  color: #f3f7ff !important;
  text-decoration: none !important;
}
.site-footer a:hover {
  color: #ffd7dc !important;
  text-decoration: underline !important;
}
.site-footer .social-icon,
.site-footer .social-icon i {
  color: #ffffff !important;
}
/* Keep text readable if a section uses a dark/black background. */
.bg-dark,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark p,
.bg-dark span,
.bg-dark li {
  color: #ffffff !important;
}

/* Text color fix: headings placed over image/gradient backgrounds must stay readable. */
header.text-white,
header.text-white h1,
header.text-white h2,
header.text-white h3,
header.text-white h4,
header.text-white h5,
header.text-white h6,
header.text-white p,
header.text-white span,
.volunteer-hero,
.volunteer-hero h1,
.volunteer-hero h2,
.volunteer-hero h3,
.volunteer-hero p,
.volunteer-hero span,
.role-card,
.role-card h1,
.role-card h2,
.role-card h3,
.role-card h4,
.role-card h5,
.role-card h6,
.role-card p,
.role-card span {
  color: #ffffff !important;
}

/* Keep role card icons readable while the green role cards use white text. */
.role-card .role-icon,
.role-card .role-icon i {
  color: var(--pet-green) !important;
}

/* Keep small text inside white statistic cards dark even when the cards are placed on the hero. */
header.text-white .card,
header.text-white .card h1,
header.text-white .card h2,
header.text-white .card h3,
header.text-white .card h4,
header.text-white .card h5,
header.text-white .card h6,
header.text-white .card p,
header.text-white .card span,
header.text-white .card div,
header.text-white .card small {
  color: var(--pet-ink) !important;
}
header.text-white .card .text-muted {
  color: var(--pet-muted) !important;
}


/* WEBSITE-WIDE WIDTH UPDATE:
   Makes the public/user pages wider so the system looks more like a full website,
   not a narrow mobile-style layout on desktop screens. */
@media (min-width: 1200px) {
  .container {
    max-width: 1240px !important;
  }

  .page-wrap,
  .public-wrap,
  .main-wrap,
  .profile-wrap {
    max-width: 1220px !important;
  }
}


/* NATURAL PET ADOPTION WEBSITE POLISH:
   Keeps technical system behavior hidden and makes the user side feel like a normal pet adoption website. */
.pet-site-note,
.live-gallery-badge {
  display: none !important;
}

.pet-card,
.role-card,
.impact-card,
.story-card,
.gallery-photo-card,
.volunteer-form-card,
.card {
  transition: transform .18s ease, box-shadow .18s ease;
}

.pet-card:hover,
.role-card:hover,
.impact-card:hover,
.story-card:hover,
.gallery-photo-card:hover,
.card:hover {
  transform: translateY(-3px);
}

a.btn,
button.btn,
.btn-submit,
.btn-hero-light,
.btn-hero-outline {
  cursor: pointer;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1240px !important;
  }
}


/* CLEAN WEBSITE BACKGROUND POLISH:
   Makes public/user pages look like one neat website instead of separate PPT-style slides. */
:root {
  --hfp-page-bg: #f7faf8;
  --hfp-page-bg-2: #eef7f2;
  --hfp-card-bg: rgba(255, 255, 255, 0.94);
  --hfp-border: #dfeee5;
  --hfp-soft-green: #eef8f2;
  --hfp-text: #172033;
  --hfp-muted: #64748b;
}

body {
  background:
    radial-gradient(circle at top left, rgba(22, 163, 74, 0.08), transparent 34%),
    radial-gradient(circle at top right, rgba(244, 91, 91, 0.07), transparent 30%),
    linear-gradient(180deg, var(--hfp-page-bg) 0%, var(--hfp-page-bg-2) 100%) !important;
  color: var(--hfp-text);
}

main,
.page-wrap,
.page-shell,
.profile-wrap,
.public-wrap,
.main-wrap {
  position: relative;
}

.page-wrap,
.page-shell,
.profile-wrap,
.public-wrap,
.main-wrap {
  background: transparent !important;
}

.hero,
.donation-hero,
.volunteer-hero,
.about-hero,
.profile-hero,
.furever-hero,
.home-hero,
.section-card,
.donation-card,
.volunteer-form-card,
.main-card,
.card-section,
.moments-wrap,
.story-card,
.impact-card,
.pawalert-quick-card,
.how-step,
.role-card,
.card {
  border-radius: 26px;
}

.section-card,
.donation-card,
.volunteer-form-card,
.main-card,
.card-section,
.moments-wrap,
.story-card,
.impact-card,
.pawalert-quick-card,
.how-step,
.profile-card,
.card {
  background: var(--hfp-card-bg) !important;
  border: 1px solid var(--hfp-border) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07) !important;
}

.hero,
.donation-hero,
.volunteer-hero,
.about-hero,
.profile-hero,
.furever-hero,
.home-hero {
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08) !important;
}

.section-card,
.donation-card,
.volunteer-form-card,
.main-card,
.card-section,
.moments-wrap {
  margin-bottom: 26px;
}

.container,
.container-fluid {
  position: relative;
}

.site-navbar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(223, 238, 229, 0.9);
}

.site-footer {
  margin-top: 70px !important;
}

@media (min-width: 992px) {
  .page-wrap,
  .page-shell,
  .profile-wrap,
  .public-wrap,
  .main-wrap {
    padding-top: 42px !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 767px) {
  body {
    background:
      linear-gradient(180deg, #f8fbf9 0%, #eef7f2 100%) !important;
  }

  .section-card,
  .donation-card,
  .volunteer-form-card,
  .main-card,
  .card-section,
  .moments-wrap {
    border-radius: 22px;
  }
}


/* HOME AND PUBLIC BACKGROUND FINAL FIX:
   Keeps the user side neat and connected, without PPT-like blocks or extra clip sections. */
body {
  background:
    linear-gradient(180deg, #fbfdfc 0%, #f3faf6 42%, #eef7f2 100%) !important;
}

#home,
.home-page,
body:has(.home-hero),
body:has(.help-section),
body:has(.rescues-section) {
  background:
    linear-gradient(180deg, #fbfdfc 0%, #f3faf6 45%, #eef7f2 100%) !important;
}

.home-hero,
.hero,
.donation-hero,
.volunteer-hero,
.about-hero,
.furever-hero,
.profile-hero {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(242,250,246,.96)) !important;
  border: 1px solid #dfeee5 !important;
}

section {
  scroll-margin-top: 90px;
}

.page-wrap,
.page-shell,
.profile-wrap {
  background: transparent !important;
}

.section-card,
.card-section,
.main-card,
.donation-card,
.volunteer-form-card,
.card,
.pawalert-quick-card,
.impact-card,
.how-step {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #dfeee5 !important;
}

.volunteer-moments,
.moment-note,
.moments-wrap {
  display: none !important;
}


/* VOLUNTEER HERO VISIBILITY FIX:
   Keeps the cleaner site background but makes the volunteer hero readable again. */
.volunteer-hero {
  background: linear-gradient(135deg, rgba(21, 128, 61, .96), rgba(244, 91, 91, .86)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 24px 60px rgba(21, 128, 61, .18) !important;
}

.volunteer-hero h1,
.volunteer-hero p,
.volunteer-hero .hero-eyebrow,
.volunteer-hero .hero-eyebrow i,
.volunteer-hero .btn-hero-outline {
  color: #ffffff !important;
}

.volunteer-hero p {
  color: rgba(255,255,255,.92) !important;
}

.volunteer-hero .hero-eyebrow {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
}

.volunteer-hero .btn-hero-light {
  background: #ffffff !important;
  color: #166534 !important;
}

.volunteer-hero .btn-hero-outline {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}

.volunteer-hero::after {
  color: rgba(255,255,255,.14) !important;
}
.required-asterisk{color:#dc3545 !important;font-weight:700;}


/* Mobile/tablet responsiveness for the public/user side. */
@media (max-width: 991px){
  html,body{max-width:100%;overflow-x:hidden;}
  img,video,iframe{max-width:100%;height:auto;}
  .site-navbar .navbar-collapse{padding:10px 0 14px;}
  .site-navbar .navbar-nav{gap:4px!important;}
  .site-navbar .nav-link,.profile-link{width:100%;text-align:left;margin:0!important;}
  .table-responsive{border-radius:16px;}
  .pet-website-hero{margin-bottom:20px;}
}
@media (max-width: 767px){
  .container,.container-fluid{padding-left:14px!important;padding-right:14px!important;}
  .row{--bs-gutter-x:1rem;}
  .pet-website-hero,.home-section-card,.section-card,.page-header,.hero-card,.filter-box,.big-cta{border-radius:20px!important;}
  .pet-website-hero{padding:20px!important;}
  .pet-website-title{font-size:clamp(1.9rem,9vw,2.8rem)!important;}
  .pet-website-subtitle{font-size:.95rem;line-height:1.6;}
  .home-support-card,.manager-card,.alert-card,.volunteer-card,.donation-card,.pet-card{border-radius:20px!important;}
  .btn:not(.navbar-toggler):not(.btn-close){white-space:normal;}
  .modal-dialog{margin:.75rem;}
  .modal-content{max-height:calc(100vh - 1.5rem);overflow:auto;}
  .site-footer{border-top-left-radius:24px;border-top-right-radius:24px;}
}
@media (max-width: 420px){
  .container,.container-fluid{padding-left:12px!important;padding-right:12px!important;}
  .pet-website-hero{padding:16px!important;}
  .pet-hero-chip{width:100%;justify-content:center;}
}

/* Mobile hardening: keep public/user content inside the viewport without changing desktop styling. */
html,body{max-width:100%;overflow-x:hidden;}
img,video,iframe,canvas{max-width:100%;}
@media(max-width:767px){
  body{width:100%;}
  .container,.container-fluid,.page-shell,.page-wrap,.public-wrap,.main-wrap,.profile-wrap{max-width:100%!important;min-width:0!important;}
  .container,.container-fluid{padding-left:14px!important;padding-right:14px!important;}
  .row{max-width:100%;margin-left:0!important;margin-right:0!important;}
  .row>[class*="col-"]{min-width:0;padding-left:7px!important;padding-right:7px!important;}
  .card,.home-section-card,.home-carousel-card,.home-support-card,.section-card,.donation-card,.story-card,.team-card,.page-header,.hero-card,.dashboard-card,.alert-card,.volunteer-card,.pet-card,.big-cta,.filter-box{max-width:100%!important;min-width:0!important;}
  .modal-dialog{max-width:calc(100vw - 24px)!important;margin:12px!important;}
  .modal-content{max-width:100%!important;overflow:hidden;}
  .modal-body,.modal-header,.modal-footer{padding-left:16px!important;padding-right:16px!important;}
  .modal-footer{flex-wrap:wrap!important;gap:8px!important;}
  .modal-footer>.btn{flex:1 1 140px!important;white-space:normal!important;}
  .table-responsive,.table-wrap{width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  table{width:max-content;min-width:100%;}
  input,select,textarea,.form-control,.form-select{max-width:100%!important;min-width:0!important;}
  .d-flex:not(.flex-nowrap){flex-wrap:wrap;}
  .btn-group{flex-wrap:wrap!important;max-width:100%;}
  .btn{max-width:100%;white-space:normal;}
  h1,h2,h3,h4,h5,p,span,a{overflow-wrap:anywhere;}
  .site-navbar .navbar-collapse{max-width:100%;}
  .site-footer{overflow:hidden;}
}
@media(max-width:480px){
  .pet-website-hero{padding:20px!important;}
  .pet-website-title{font-size:clamp(1.8rem,10vw,2.5rem)!important;}
}
\n\n/* 2026-10-06 public UI consistency pass */\nbody,button,input,select,textarea,.btn{font-family:'Poppins',Arial,sans-serif!important;}\nh1,h2,h3,h4,h5,h6{font-family:'Poppins',Arial,sans-serif!important;}\np{line-height:1.65;}\n.home-section-card p,.story-text p,.advocacy-description,.donation-card p,.section-card p,.volunteer-form-card p,.role-card p,.impact-card span,.pet-website-subtitle{text-align:justify;}\n.btn,.btn-submit,.btn-hero-light,.btn-hero-outline,.sponsor-btn,.btn-donate{border-radius:12px!important;font-weight:700!important;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;}\n.btn:hover,.btn-submit:hover,.btn-hero-light:hover,.btn-hero-outline:hover,.sponsor-btn:hover,.btn-donate:hover{transform:translateY(-1px);}\n.home-support-card,.about-quick-card,.donation-stat,.manager-card,.alert-type-card,.impact-card,.role-card{transition:none!important;}\n.home-support-card:hover,.about-quick-card:hover,.donation-stat:hover,.manager-card:hover,.alert-type-card:hover,.impact-card:hover,.role-card:hover{transform:none!important;}\n.donation-stat,.manager-card,.impact-card,.about-quick-card{box-shadow:none!important;}\n
/* 2026-10-06 comprehensive public/user mobile & tablet responsiveness */
html,body{max-width:100%;overflow-x:hidden!important}
.site-navbar,.page-shell,.page-wrap,.public-wrap,.main-wrap,.profile-wrap,.container,.container-fluid{max-width:100%;min-width:0}
img,video,iframe,canvas,svg{max-width:100%}
.table-responsive,.table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}

@media (max-width:1199px){
  .container{max-width:100%!important;padding-left:22px!important;padding-right:22px!important}
  .pet-website-hero{padding:28px!important}
  .status-filter-row{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(220px,.8fr) minmax(180px,.7fr) minmax(180px,.7fr)!important;gap:14px!important}
  .home-about-copy{padding-left:20px!important;padding-right:20px!important}
}

@media (max-width:991px){
  .container,.container-fluid{padding-left:18px!important;padding-right:18px!important}
  .site-navbar .navbar-collapse{background:#fff;border:1px solid #e5eef0;border-radius:16px;padding:12px!important;margin-top:10px;box-shadow:0 14px 34px rgba(23,32,51,.09)}
  .site-navbar .navbar-nav{align-items:stretch!important}
  .site-navbar .nav-item{width:100%}
  .site-navbar .nav-link{padding:10px 12px!important;border-radius:10px}
  .site-navbar .nav-link.active{background:#eef8f2}
  .user-profile-menu,.site-navbar .nav-item.ms-lg-2{margin-left:0!important}
  .user-account-dropdown{position:static!important;float:none!important;width:100%!important;box-shadow:none!important;border:1px solid #e5eef0!important;margin-top:6px!important}
  .pet-website-hero{padding:24px!important}
  .status-filter-row{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .filter-box{padding:16px!important}
  .donation-hero .row,.home-about-row{align-items:center}
  .volunteer-hero{padding:34px 30px!important}
  .volunteer-hero h1{font-size:clamp(2.3rem,7vw,4rem)!important}
  .volunteer-form-card{padding:24px!important}
  .advocacy-highlight{flex-basis:100%!important}
  .advocacy-carousel{padding-left:44px!important;padding-right:44px!important}
  .advocacy-collage{height:250px!important}
  .home-image{width:100%!important;height:auto!important;max-height:460px!important;object-fit:contain!important}
  .messages-shell,.messages-layout,.message-layout{max-width:100%!important}
}

@media (max-width:767px){
  .container,.container-fluid{padding-left:12px!important;padding-right:12px!important}
  .site-navbar .navbar-brand img{max-height:52px!important;width:auto!important}
  .site-navbar .navbar-collapse{border-radius:14px}
  .pet-website-hero{padding:18px!important;border-radius:20px!important}
  .pet-website-title{font-size:clamp(2rem,10vw,3rem)!important}
  .pet-website-subtitle{font-size:.93rem!important;line-height:1.55!important}
  .pet-hero-chip-row{display:grid!important;grid-template-columns:1fr!important}
  .pet-hero-chip{width:100%!important;justify-content:flex-start!important}
  .status-filter-row{grid-template-columns:1fr!important}
  .status-filter-row>div,.filter-box .form-control,.filter-box .form-select,.pet-type-toggle{width:100%!important;max-width:none!important}
  .pet-type-toggle{display:grid!important;grid-template-columns:repeat(3,1fr)!important;height:auto!important;padding:4px!important}
  .pet-type-toggle .btn-filter{height:38px!important;min-height:38px!important;padding:6px 10px!important}
  .page-title,.hero-title{font-size:clamp(2rem,9vw,3rem)!important}
  .donation-hero{padding:22px!important;border-radius:20px!important}
  .donation-stat{height:100%!important;padding:14px!important}
  .donation-card{padding:18px!important}
  .volunteer-hero{padding:26px 20px!important;border-radius:20px!important}
  .volunteer-hero h1{font-size:clamp(2.15rem,10vw,3rem)!important}
  .volunteer-hero .d-flex,.volunteer-hero .hero-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .volunteer-hero .btn-hero-light,.volunteer-hero .btn-hero-outline{width:100%!important}
  .volunteer-form-card{padding:18px!important;border-radius:20px!important}
  .volunteer-form-card .row>[class*="col-"]{width:100%!important}
  .advocacy-carousel{padding-left:34px!important;padding-right:34px!important}
  .advocacy-carousel-btn{width:32px!important;height:42px!important}
  .advocacy-collage{height:210px!important}
  .advocacy-info{padding:16px!important}
  .advocacy-highlight h3{font-size:1.15rem!important}
  .home-about-row{gap:10px}
  .home-about-copy{padding:16px 4px 0!important}
  .home-about-copy h2{text-align:center!important}
  .home-about-copy p{text-align:justify!important}
  .proof-thumb-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .proof-thumb{width:100%!important;height:auto!important;aspect-ratio:4/3!important;padding:5px!important}
  .proof-thumb img{object-fit:cover!important}
  .modal-dialog{max-width:calc(100vw - 16px)!important;margin:8px!important}
  .modal-content{max-height:calc(100vh - 16px)!important;overflow:auto!important}
  .modal-footer{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .modal-footer .btn,.modal-footer a.btn{width:100%!important;margin:0!important}
  .table-responsive table,.table-wrap table{min-width:650px}
  .messages-shell,.messages-layout,.message-layout{height:auto!important;min-height:0!important}
  .messages-sidebar,.conversation-list{width:100%!important;max-width:none!important}
  .messages-main,.conversation-pane{min-height:420px!important}
}

@media (max-width:480px){
  .container,.container-fluid{padding-left:10px!important;padding-right:10px!important}
  .site-navbar .navbar-toggler{width:34px!important;height:34px!important}
  .pet-website-hero,.donation-hero,.volunteer-hero,.section-card,.filter-box,.donation-card,.volunteer-form-card{border-radius:16px!important}
  .filter-box{padding:12px!important}
  .pet-type-toggle .btn-filter{font-size:.9rem!important}
  .advocacy-carousel{padding-left:28px!important;padding-right:28px!important}
  .advocacy-collage{height:185px!important}
  .proof-thumb-list{grid-template-columns:1fr!important}
  .proof-thumb{aspect-ratio:16/10!important}
  .table-responsive table,.table-wrap table{min-width:580px}
}

/* 2026-10-07 FINAL MOBILE NAV CONTROL — same button for User/Admin/Staff */
@media (max-width: 991.98px){
  .site-navbar .navbar-toggler{
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
    padding:0!important;border:0!important;border-radius:12px!important;
    background:#2f3135!important;color:#fff!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    box-shadow:0 5px 14px rgba(23,32,51,.16)!important;
  }
  .site-navbar .navbar-toggler-icon{display:none!important;}
  .site-navbar .navbar-toggler::after{
    content:'›'!important;font-family:Arial,sans-serif!important;font-size:30px!important;font-weight:400!important;
    line-height:1!important;color:#fff!important;transform:translateY(-2px)!important;
  }
  .site-navbar .navbar-toggler[aria-expanded="true"]::after{content:'‹'!important;}
}

/* Informational cards remain stationary on hover. */
.home-support-card:hover,.about-quick-card:hover,.donation-stat:hover,.manager-card:hover,.alert-type-card:hover,.role-card:hover,.pet-card:hover,.impact-card:hover,.story-card:hover,.gallery-photo-card:hover,.mini-card:hover{transform:none!important;box-shadow:inherit;animation:none!important}

/* Keep the three-line navigation control on mobile Home and other user pages. */
@media(max-width:991.98px){
.site-navbar .navbar-toggler{background:#fff!important;color:#26374b!important;border:1px solid #e3e9eb!important}
.site-navbar .navbar-toggler::after,.site-navbar .navbar-toggler[aria-expanded="true"]::after{content:none!important;display:none!important}
.site-navbar .navbar-toggler-icon{display:block!important;position:relative!important;width:23px!important;height:20px!important;border-top:2px solid #26374b!important;border-bottom:2px solid #26374b!important;background:none!important}
.site-navbar .navbar-toggler-icon::after{content:''!important;display:block!important;position:absolute!important;top:8px!important;left:0!important;width:100%!important;height:2px!important;background:#26374b!important}
}

/* Hamburger control spacing and no dark interaction flash */
@media(max-width:991.98px){
 .site-navbar .navbar-toggler,.site-navbar .navbar-toggler:hover,.site-navbar .navbar-toggler:focus,.site-navbar .navbar-toggler:active{
   background:#fff!important;color:#26374b!important;border:1px solid #e3e9eb!important;box-shadow:0 3px 10px rgba(0,0,0,.08)!important;
 }
 .site-navbar .navbar-toggler{width:48px!important;height:48px!important;padding:12px!important;}
 .site-navbar .navbar-toggler-icon{width:22px!important;height:18px!important;}
 .site-navbar .navbar-toggler-icon::after{top:7px!important;}
}

/* Public footer visibility: prevent inherited fade / reveal styles from hiding contact and social details. */
.site-footer .container,
.site-footer .row,
.site-footer .row > [class*="col-"],
.site-footer h4,
.site-footer .social-line,
.site-footer .social-line a,
.site-footer .social-line .social-icon,
.site-footer p {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transition-property: color, background-color, border-color !important;
}
.site-footer .social-line { display: flex !important; align-items: center; gap: 12px; min-height: 30px; }
.site-footer .social-line a { display: inline !important; color: #f3f7ff !important; }
.site-footer .row > [class*="col-"] { height: auto !important; }