:root {
  /* Base / Neutral */
  --bg: #fffafa;           /* match home page background */
  --card: #ffffff;          /* white cards */
  --muted: #6b5e4b;         /* muted brown for text */
  --text: #f6ebdd;         /* dark brown for headings */
  --text2: #4b3b2a;        /* darker brown for body text */

  /* Primary Accent */
  --accent: #a9734b;        /* warm brown for main buttons, borders */
  --accent-light: #d4a077;  /* lighter brown for gradients / hover states */

  /* Pink Highlights */
  --pink: #ff8b94;           /* soft pink for badges, secondary CTAs */
  --pink-light: #ffc4c8;     /* lighter pink for hover / subtle backgrounds */

  /* Gradients */
  --glow1: linear-gradient(90deg, #ff9c6b, #ffc4a3);   /* peach gradient */
  --glow2: linear-gradient(90deg, #ff8b94, #ffc4c8);   /* pink gradient for buttons/badges */

  /* Modal & Sidebar */
  --modal-bg: #fff;             /* modal card background */
  --modal-sidebar-bg: linear-gradient(135deg, #fff4ec, #ffd9cc); /* modal sidebar gradient */
  --modal-input-border: #ffd9cc; 
  --modal-input-bg: #fff7f5; 
  --modal-input-focus-bg: #fff0f2;
  --modal-close-btn: #6b5e4b;
  --modal-scrollbar-track: #ffe6e9;
  --modal-scrollbar-thumb: #ff8b94;

  /* Buttons */
  --btn-save-bg: #ff8b94;
  --btn-save-hover-bg: #ffc4c8;
  --btn-cancel-bg: #ffd9cc;
  --btn-cancel-hover-bg: #ffc4b0;
  --btn-cancel-color: #a9734b;

  /* Tab Menu */
  --tab-menu-bg: #ffe6e9;
  --tab-menu-active-bg: #ff8b94;
  --tab-menu-active-color: #fff;
  --tab-menu-color: #6b5e4b;

  /* Photo Placeholder */
  --photo-placeholder-bg: #fff0f2;
  --photo-placeholder-border: #ffc4c8;
  --photo-placeholder-hover-bg: #ffc4c8;
  --photo-placeholder-hover-border: #ff8b94;
  --photo-placeholder-hover-color: #ff8b94;

  /* Shadows */
  --shadow-card: rgba(0,0,0,0.08);
  --shadow-card-hover: rgba(0,0,0,0.15);
  --shadow-btn-report: rgba(168,124,95,0.4);
  --shadow-btn-report-hover: rgba(168,124,95,0.5);
  --shadow-btn-details: rgba(168,124,95,0.3);
  --shadow-btn-details-hover: rgba(168,124,95,0.4);
  --shadow-tab-active: rgba(255,140,148,0.3);
  --shadow-modal: rgba(0,0,0,0.2);
}

/* BODY */
body {
  background: var(--bg) !important;
  font-family: "Poppins", sans-serif;
  color: var(--text2);
  overflow-x: hidden;
}
/* Remove paw background for this page */
body::before {
  display: none;
}
/* FONT AWESOME ICONS */
.fa, .fas, .fab {
  color: var(--pink);
  margin-right: 6px;
}

.rescue-page-shell {
  padding-top: 0;
  margin-top: 14px;
  margin-bottom: 48px;
}

.rescue-hero-banner {
  width: 100%;
  min-height: 300px;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: 25px;
  box-shadow: 0 18px 42px rgba(82, 44, 59, 0.14);
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 134, 166, 0.16), transparent 20%),
    linear-gradient(90deg, #fff 0%, #fff5f7 58%, #fff5f7 100%);
  isolation: isolate;
  position: relative;
}

.rescue-hero-image {
  position: absolute;
  inset: 0 auto 0 0;
  width: 66%;
  min-height: 300px;
  overflow: hidden;
  z-index: 1;
}

.rescue-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 30% 42%;
  transform: scale(1.02);
}

.rescue-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(255, 245, 247, 0) 0%,
      rgba(255, 245, 247, 0.08) 45%,
      rgba(255, 245, 247, 0.62) 72%,
      #fff5f7 100%),
    linear-gradient(0deg,
      rgba(255, 245, 247, 0.24),
      rgba(255, 245, 247, 0));
  pointer-events: none;
}

.rescue-hero-image::before {
  content: "";
  position: absolute;
  top: -8%;
  right: -34px;
  width: 96px;
  height: 116%;
  background: rgba(255, 245, 247, 0.44);
  filter: blur(24px);
  z-index: 2;
  pointer-events: none;
}

.rescue-hero-copy {
  width: min(54%, 640px);
  min-height: 300px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 150px 34px 0;
  position: relative;
  z-index: 4;
}

.rescue-hero-copy h1 {
  max-width: 520px;
  margin: 0 0 14px;
  color: #2f2929;
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: 0;
}

.rescue-hero-copy h1 span {
  display: block;
  width: fit-content;
  background: linear-gradient(90deg, #f22875 0%, #ff4d8a 48%, #ff83a9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rescue-hero-copy p {
  margin: 0;
  color: #493f44;
  font-size: 1.04rem;
  line-height: 1.45;
  font-weight: 500;
}

.rescue-hero-paw {
  position: absolute;
  top: 66px;
  right: 135px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7da0, #ff4f83);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 10px 22px rgba(255, 79, 131, 0.22);
}

.rescue-hero-paw i {
  margin-right: 0;
  color: #fff;
  font-size: 26px;
}

.rescue-hero-paw::before,
.rescue-hero-paw::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff99b7;
}

.rescue-hero-paw::before {
  top: -8px;
  right: 3px;
}

.rescue-hero-paw::after {
  top: -15px;
  right: -10px;
}

.rescue-hero-wave {
  position: absolute;
  right: -58px;
  bottom: -88px;
  width: 330px;
  height: 235px;
  border-radius: 76% 0 0 0;
  background: linear-gradient(135deg, rgba(255, 151, 180, 0.92), #ff5f91);
  z-index: 2;
}

.rescue-hero-wave::before,
.rescue-hero-wave::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 151, 181, 0.22);
}

.rescue-hero-wave::before {
  width: 16px;
  height: 16px;
  top: -90px;
  right: 90px;
}

.rescue-hero-wave::after {
  width: 10px;
  height: 10px;
  top: -62px;
  right: 148px;
}

.rescue-hero-banner::before,
.rescue-hero-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 128, 165, 0.18);
  z-index: 3;
  pointer-events: none;
}

.rescue-hero-banner::before {
  width: 14px;
  height: 14px;
  top: 38px;
  right: 92px;
  box-shadow:
    -44px 20px 0 rgba(255, 128, 165, 0.12),
    -18px 68px 0 rgba(255, 128, 165, 0.16);
}

.rescue-hero-banner::after {
  width: 8px;
  height: 8px;
  top: 92px;
  right: 70px;
  box-shadow:
    -92px -54px 0 rgba(255, 128, 165, 0.12),
    -30px 104px 0 rgba(255, 128, 165, 0.14);
}

/* FORM WRAPPER — compact */
.form-wrapper {
  background: linear-gradient(180deg, #fff 0%, #fff8fa 100%);
  border: 1px solid rgba(255, 188, 207, 0.55);
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 18px 42px rgba(82, 44, 59, 0.10);
}

.login-required-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff1f6;
  border: 1px solid #ffc4d7;
  border-left: 5px solid #ff7fa8;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.login-required-banner-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffdbe8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-required-banner-icon i {
  color: #c63f71;
  margin-right: 0;
}

.login-required-banner-content {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.login-required-banner-content strong {
  color: #8a234d;
  font-size: 0.95rem;
}

.login-required-banner-content span {
  color: #6b4b5a;
  font-size: 0.84rem;
}

.login-required-banner-btn {
  margin-left: auto;
  text-decoration: none;
  background: #ff8faf;
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.login-required-banner-btn:hover {
  background: #ff7fa4;
  color: #fff;
}

.guest-locked .rescue-form-fields {
  opacity: 0.6;
}

.guest-locked .form-control,
.guest-locked .input-group-text,
.guest-locked textarea {
  cursor: not-allowed;
}

/* FORM HEADINGS */
.form-wrapper h2 {
  font-size: 25px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #1f2937;
}

.section-title {
  font-size: 16px;
  margin-top: 15px;
  color: #ff5f91;
  font-weight: 700;
  margin-bottom: -10px;
}

/* INPUTS & TEXTAREA */
.form-control {
  background: #fff;
  border: 1px solid #f4c7d6;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  height: 35px;
  box-shadow: 0 8px 20px rgba(82, 44, 59, 0.035);
}

textarea.form-control {
  height: 50px;
}

.form-control:focus {
  border-color: #ff6f9d;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 95, 145, 0.14);
}

.input-group-text {
  border-radius: 0 12px 12px 0;
  padding: 6px 10px;
  font-size: 13px;
  color: #ff5f91;
  background: #fff5f7;
  border: 1px solid #f4c7d6;
}

/* SUBMIT BUTTON */
.btn-submit {
  padding: 8px 35px;
  font-size: 15px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ff7da0, #ff4f83);
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
  border: none;
  box-shadow: 0 10px 22px rgba(255, 79, 131, 0.20);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,140,148,0.5);
}

/* RIGHT INFO CARD — improved spacing */
.right-info-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.72), transparent 20%),
    linear-gradient(180deg, #fff5f7 0%, #ffd3df 100%);
  border: 1px solid rgba(255, 188, 207, 0.62);
  border-radius: 22px;
  padding: 25px 22px;
  box-shadow: 0 18px 42px rgba(82, 44, 59, 0.12);
  color: var(--text2);
}

.right-info-card h3 {
  font-size: 20px;
  margin-bottom: 15px; /* more space below heading */
  font-weight: 700;
  color: #1f2937;
}

.right-info-card p {
  font-size: 14px; /* slightly bigger for readability */
  margin-bottom: 27px;
}

.right-info-card ul {
  padding-left: 0;
  list-style: none; /* removes default bullets */
}

.right-info-card li {
  display: flex;
  align-items: flex-start; /* icon aligns with text top */
  gap: 10px; /* more space between icon and text */
  margin-bottom: 8px; /* space between items */
  font-size: 14px; /* slightly bigger */
  line-height: 1.3;

}

.right-info-card li .fa {
  font-size: 16px;
  color: #ff5f91;
  flex-shrink: 0;
  margin-top: 2px; /* keep vertical alignment */
}
.right-info-card ul li:first-child {
  padding-top: 5px;
}


/* MAP */
.rescue-map-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.rescue-map-search .form-control {
  margin: 0;
}

.rescue-map-search-btn {
  height: 42px;
  min-width: 112px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff5f91, #f44483);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(244, 68, 131, 0.2);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.rescue-map-search-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(244, 68, 131, 0.26);
}

.rescue-map-search-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.rescue-map-search-btn.is-loading i {
  animation: rescue-spin 0.8s linear infinite;
}

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

#map {
  width: 100%;
  height: 250px;
  border-radius: 15px;
  border: 2px solid var(--photo-placeholder-border);
  margin-top: 10px;
  box-shadow: 0 4px 12px var(--shadow-card);
}

@media (max-width: 576px) {
  .rescue-map-search {
    grid-template-columns: 1fr;
  }

  .rescue-map-search-btn {
    width: 100%;
  }
}

.map-lock-wrapper {
  position: relative;
}

.map-lock-wrapper.is-guest #map {
  pointer-events: none;
  filter: grayscale(0.15) blur(1px);
}

.map-lock-overlay {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: rgba(255, 245, 247, 0.76);
  border: 1px dashed #ff9bbc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #9c2b5a;
  font-weight: 600;
  font-size: 0.9rem;
}

.map-lock-overlay i {
  margin-right: 0;
}

.rescue-upload-block {
  margin-top: 4px;
}

.rescue-upload-title {
  display: block;
  margin-bottom: 7px;
  color: #ff5f91;
  font-size: 14px;
  font-weight: 700;
}

.rescue-upload-title span {
  color: #9a7a82;
  font-weight: 500;
}

.rescue-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  gap: 14px;
  align-items: stretch;
}

.rescue-photo-drop {
  min-height: 92px;
  margin: 0;
  border: 1.5px solid #f4c7d6;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text2);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.rescue-photo-drop:hover {
  border-color: #ff6f9d;
  background: #fff7f9;
  transform: translateY(-1px);
}

.rescue-photo-drop input {
  display: none;
}

.rescue-photo-icon {
  color: #ff5f91;
  font-size: 18px;
  line-height: 1;
}

.rescue-photo-icon i {
  margin-right: 0;
}

.rescue-photo-main {
  font-size: 13px;
  font-weight: 500;
}

.rescue-photo-drop small {
  color: #7d6f75;
  font-size: 11px;
}

.rescue-photo-preview {
  min-height: 92px;
  border-radius: 14px;
  background: #fff5f7;
  border: 1px dashed #f4c7d6;
  position: relative;
  overflow: hidden;
}

.rescue-photo-preview:not(.has-image) {
  display: none;
}

.rescue-photo-preview img {
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  display: block;
}

.rescue-photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #ff5f91;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.btn-submit.btn-submit-disabled,
.btn-submit.btn-submit-disabled:hover {
  background: #f3ccd9;
  color: #8b5a69;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.rescue-alert-container {
  z-index: 26000 !important;
}

.rescue-alert-popup {
  width: min(92vw, 430px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 157, 188, 0.46) !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(255, 225, 235, 0.95), transparent 34%),
    #fff8fb !important;
  box-shadow: 0 22px 60px rgba(128, 48, 78, 0.22) !important;
  padding: 1.35rem 1.35rem 1.25rem !important;
}

.rescue-alert-title {
  color: #7f254b !important;
  font-size: 1.24rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.rescue-alert-text {
  color: #6f5561 !important;
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
}

.rescue-alert-confirm {
  min-width: 104px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ffa6c2, #f45f94) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 24px rgba(244, 95, 148, 0.28) !important;
}

.rescue-alert-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(244, 95, 148, 0.34) !important;
}

.rescue-alert-popup .swal2-icon.swal2-error {
  border-color: #f78db0 !important;
  color: #df477f !important;
}

.rescue-alert-popup .swal2-icon.swal2-success {
  border-color: #f78db0 !important;
}

.rescue-alert-popup .swal2-success-ring {
  border-color: rgba(247, 141, 176, 0.36) !important;
}

.rescue-alert-popup .swal2-success-line-tip,
.rescue-alert-popup .swal2-success-line-long {
  background-color: #df477f !important;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .rescue-hero-banner {
    min-height: 250px;
  }

  .rescue-hero-image {
    width: 68%;
    min-height: 250px;
  }

  .rescue-hero-copy {
    width: 58%;
    min-height: 250px;
    padding: 28px 88px 28px 0;
  }

  .rescue-hero-paw {
    top: 58px;
    right: 62px;
    width: 46px;
    height: 46px;
  }

  .rescue-hero-paw i {
    font-size: 20px;
  }

  .rescue-hero-wave {
    width: 210px;
    height: 170px;
  }

  .form-wrapper {
    padding: 15px;
  }

  .right-info-card {
    margin-top: 15px;
    padding: 15px;
  }

  .login-required-banner {
    flex-wrap: wrap;
  }

  .login-required-banner-btn {
    margin-left: 0;
  }
}

@media (max-width: 576px) {
  .rescue-hero-banner {
    min-height: 380px;
  }

  .rescue-hero-image {
    width: 100%;
    height: 210px;
    min-height: 210px;
  }

  .rescue-hero-copy {
    width: 100%;
    min-height: 170px;
    padding: 214px 94px 22px 20px;
    justify-content: flex-start;
  }

  .rescue-hero-copy h1 {
    font-size: 1.68rem;
  }

  .rescue-hero-copy p {
    font-size: 0.92rem;
  }

  .rescue-hero-paw {
    top: auto;
    right: 70px;
    bottom: 56px;
    width: 42px;
    height: 42px;
  }

  .rescue-upload-row {
    grid-template-columns: 1fr;
  }

  .rescue-photo-preview {
    min-height: 160px;
  }

  .rescue-photo-preview img {
    min-height: 160px;
  }
}

/* ---------------------------- */
/* FORM INPUT ICONS             */
/* ---------------------------- */
.input-group-text {
  display: flex;
  align-items: center;       /* vertically center icon */
  justify-content: center;   /* center horizontally */
  padding: 4px 10px;
  font-size: 14px;
  color: #ff5f91;
  background: #fff5f7;
  border: 1px solid #f4c7d6;
  border-radius: 0 12px 12px 0;
}

/* Font Awesome icon inside input-group */
.input-group-text .fa, 
.input-group-text .fas, 
.input-group-text .fab {
  font-size: 16px;           /* consistent size */
  margin: 0;                 /* remove extra margin */
  vertical-align: middle;    /* align perfectly with input */
}


.right-info-card li .fa {
  font-size: 14px;
  color: #ff5f91;
  flex-shrink: 0;             /* prevent shrinking */
  margin-top: 2px;            /* slightly align with text */
}

/* ---------------------------- */
/* INFO CARD HEADINGS ICONS     */
/* ---------------------------- */
.right-info-card h3 .fa {
  font-size: 18px;
  margin-right: 8px;
  vertical-align: middle;
}