/* ==========================================================================
   HomeFur All — shelters-adopt.css
   --------------------------------------------------------------------------
   Shelters page and Adopt page. Loads after base.css.
   1. Page layout + filter spacing
   2. Filter dropdown
   3. Hoverabble contact popover
   4. Show popover on hover or focus
   5. Pet cards hover effects
   6. Pet badge with custom image icon
   7. Filter controls stack & input styling
   8. Skeleton loader styles
   ========================================================================== */

/* ---- 1. Page layout + filter spacing ---- */
.shelters-page {
  padding: 4rem 0 5rem;
}

.filter-pills {
  margin-bottom: .8rem;
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.pager-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 1.2rem;
  font: var(--font-display);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.pager-btn:hover:not(:disabled) {
  border-color: var(--moss);
}
.pager-btn--next {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.pager-btn--next:hover:not(:disabled) {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
}
.pager-btn:disabled {
  opacity: .4;
  cursor: default;
}
.pager-status {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- Header Flex Container (Right-aligned Filter Controls) ---- */
.section-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  width: 100%;
}

.filter-controls-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  margin-left: auto;
}

.filter-controls-right .filter-dropdown {
  margin-bottom: 0;
}

/* Align select wrapper inside right filter controls */
.filter-controls-right .select-wrapper {
  width: 280px;
  max-width: 100%;
}

/* Mobile Responsiveness for filters */
@media (max-width: 768px) {
  .section-header-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-controls-right {
    align-items: flex-start;
    margin-left: 0;
    width: 100%;
  }

  .filter-controls-right .filter-dropdown {
    width: 100%;
  }

  .filter-controls-right .select-wrapper {
    width: 100%;
  }
}

/* ---- 2. Filter Dropdown ---- */
.filter-dropdown {
  margin-bottom: 2.5rem;
  position: relative; 
  display: inline-block;
  width: 200px;
}

/* ---- Select Tag ---- */
.city-select {
  width: 100%;      
  padding: .6em 2.5em .6em 1.2em; 
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease;
  
  /* Hides default browser arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; 
}

.city-select:hover, 
.city-select:focus { 
  border-color: var(--moss); 
}

/* ---- Custom Arrow (Moved to the wrapper) ---- */
.filter-dropdown::after { 
  content: "\2193";       
  font-size: 1rem;        
  color: var(--moss);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%); 
  pointer-events: none; 
}

/* ---- 3. Hoverable Contact Popover ---- */
.contact-popover-wrapper {
  position: relative;
  display: inline-block;
}

.contact-trigger {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--moss-deep);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.contact-trigger:hover,
.contact-trigger:focus {
  color: var(--coral-deep);
}

.contact-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 10;
  min-width: 200px;
  padding: .8rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(35, 38, 32, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}

/* Triangle indicator pointing down to button */
.contact-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 20px;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* 4. Show popover on hover or focus */
.contact-popover-wrapper:hover .contact-popover,
.contact-popover-wrapper:focus-within .contact-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.contact-popover ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ink-soft);
}

.contact-popover a {
  color: var(--coral-deep);
  font-weight: 600;
}

.contact-popover a:hover {
  text-decoration: underline;
}

.contact-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.contact-trigger .info-icon {
  display: inline-block;
  vertical-align: middle;
}

/* ---- 5. Pet Card Hover Effects ---- */
.pet-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}

.pet-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(35, 38, 32, 0.15);
}

.pet-card-image-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--moss);
}

.pet-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.pet-card:hover .pet-card-image-wrap img {
  transform: scale(1.08); /* Smooth image zoom on hover */
}

/* Hover Overlay Panel */
.pet-card-hover-overlay {
  position: absolute;
  inset: 0;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(29, 50, 41, 0.2) 0%, rgba(29, 50, 41, 0.92) 75%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.pet-card:hover .pet-card-hover-overlay {
  opacity: 1;
  visibility: visible;
}

/* ---- 6. Pet Badge with Custom Image Icon ---- */
.pet-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35em .8em;
  background: var(--butter);
  color: var(--moss-deep);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pet-badge .badge-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

.hover-details {
  color: #fff;
  font-size: .82rem;
}

.hover-details p {
  margin: 0 0 .3rem;
  color: #E8E2CF;
}

.hover-details strong {
  color: #fff;
}

.pet-map-link {
  display: inline-block;
  margin-top: .4rem;
  font-weight: 600;
  color: var(--butter);
  font-size: .8rem;
  text-decoration: underline;
}

.pet-map-link:hover {
  color: #fff;
}

.contact-info a {
  color: var(--butter);
  font-weight: 600;
  text-decoration: underline;
}

.contact-info a:hover {
  color: #fff;
}

/* ---- 7. Filter Controls Stack & Input/Select Styling ---- */
.filter-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  width: 100%;
}

.filter-controls .filter-dropdown,
.filter-controls .select-wrapper {
  margin-bottom: 0;
  width: 280px;
  max-width: 100%;
  position: relative;
}

/* Ensure input fields inside .select-wrapper match pill button styling */
.filter-controls input,
.select-wrapper input {
  width: 100%;
  box-sizing: border-box;
  padding: .65em 2.6em .65em 1.2em !important;
  background-color: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.filter-controls input:hover,
.filter-controls input:focus,
.select-wrapper input:hover,
.select-wrapper input:focus {
  border-color: var(--moss);
}

/* Custom arrow positioning */
.filter-controls .select-wrapper::after,
.select-wrapper::after {
  content: "\2193";
  font-size: 1rem;
  font-weight: 600;
  color: var(--moss);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ---- 8. Skeleton Loader Styles ---- */
.skeleton-card {
  pointer-events: none;
}

.skeleton-box {
  background-color: #e2e8f0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

/* Linear shimmer effect moving across elements */
.skeleton-box::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.4) 20%,
    rgba(255, 255, 255, 0.7) 60%,
    rgba(255, 255, 255, 0)
  );
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-text {
  height: 0.85rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
}

.skeleton-text.title {
  height: 1.2rem;
  width: 60%;
  margin-bottom: 0.8rem;
}

.skeleton-text.short {
  width: 40%;
}

/* ---- Fade-in Entrance Animations ---- */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}