/*
 * 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;}
}