/* Desktop navbar spacing */
@media (min-width: 1051px) {
  .navbar-content {
    padding-left: 26px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background: #f5f8ff;
  color: #0f172a;
}

/* HEADER */

.site-header {
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

.navbar {
  height: 74px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0f172a;
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
}

.logo b{
    color:#2563eb !important;
    font-weight:900;
}

.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
}

.nav-links a {
  color: #0f172a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.nav-links a.active,
.nav-links a:hover {
  color: #2457f5;
}

.nav-actions {
  display: flex;
  gap: 12px;
}

/* BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 12px;
  border: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  background: #2457f5;
  color: white;
}

.btn-light {
  background: white;
  color: #0f172a;
  border: 1px solid #dbe3f0;
}

.btn-danger {
  background: #ef233c;
  color: white;
}

.btn-success {
  background: #02a95a;
  color: white;
}

/* HERO */

.hero {
  min-height: 610px;
  padding: 70px 6% 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background:
    radial-gradient(circle at 88% 78%, rgba(255, 99, 132, 0.15) 0 130px, transparent 135px),
    radial-gradient(circle at 65% 30%, rgba(37, 99, 235, 0.13) 0 190px, transparent 195px),
    linear-gradient(180deg, #f6fbff, #ffffff);
  overflow: hidden;
}

.badge {
  display: inline-block;
  padding: 10px 18px;
  background: white;
  border: 1px solid #e7edf8;
  border-radius: 999px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -2px;
  margin-bottom: 22px;
}

.hero h1 span {
  color: #2457f5;
}

.hero-text {
  max-width: 480px;
  font-size: 17px;
  line-height: 1.7;
  color: #344563;
  margin-bottom: 28px;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.search-card {
  max-width: 650px;
  height: 62px;
  background: white;
  border: 2px solid #2457f5;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 0 18px;
  box-shadow: 0 20px 50px rgba(37, 87, 245, 0.12);
}

.search-card span {
  font-size: 22px;
}

.search-card input {
  flex: 1;
  border: none;
  outline: none;
  color: #334155;
  font-size: 16px;
}

.search-card button {
  background: #2457f5;
  color: white;
  border: none;
  padding: 13px 26px;
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* HERO PET IMAGE */

.hero-right {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
}

.pet-circle {
  width: 470px;
  height: 470px;
  background: linear-gradient(135deg, #dbeafe, #eef2ff);
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0 0 80px rgba(37, 87, 245, 0.08);
}

.pet-circle::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  border: 2px dashed rgba(37, 87, 245, 0.18);
  top: -45px;
  left: -45px;
}

.dog-img,
.cat-img {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.18);
}

.dog-img {
  width: 300px;
  height: 360px;
  border-radius: 40px;
  left: 25px;
  bottom: 25px;
}

.cat-img {
  width: 220px;
  height: 300px;
  border-radius: 35px;
  right: 25px;
  bottom: 25px;
}

.float-card {
  position: absolute;
  background: white;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 22px;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.14);
}

.float-card span {
  width: 42px;
  height: 42px;
  background: #fff1f2;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
}

.float-card h3 {
  font-size: 22px;
}

.float-card p {
  font-size: 12px;
  color: #64748b;
}

.top-card {
  top: 40px;
  right: 30px;
}

.bottom-card {
  bottom: 60px;
  right: 20px;
}

/* STATS */

.stats {
  padding: 28px 6% 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  background: white;
}

.stat-card {
  background: white;
  border: 1px solid #edf2fb;
  border-radius: 20px;
  padding: 22px;
  display: flex;
  gap: 18px;
  align-items: center;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.07);
}

.stat-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 24px;
}

.stat-icon.pink {
  background: #fff1f2;
  color: #ef233c;
}

.stat-icon.blue {
  background: #eff6ff;
  color: #2457f5;
}

.stat-icon.green {
  background: #ecfdf5;
  color: #02a95a;
}

.stat-icon.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.stat-card h3 {
  font-size: 24px;
  margin-bottom: 4px;
}

.stat-card p {
  color: #64748b;
  font-size: 14px;
}

/* LATEST PETS */

.latest {
  padding: 45px 6% 70px;
  background: #ffffff;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 22px;
}

.section-heading h2 {
  font-size: 28px;
}

.section-heading p {
  color: #64748b;
  margin-top: 6px;
}

.section-heading a {
  color: #2457f5;
  text-decoration: none;
  font-weight: 800;
}

.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  gap: 26px;
  justify-content: start;
  align-items: stretch;
}

.pet-card {
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  border: 1px solid #edf2fb;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.pet-card:hover {
  transform: translateY(-6px);
}

.pet-photo {
  height: 230px;
  position: relative;
  overflow: hidden;
  background: #eaf0f8;
}

.pet-photo {
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
  background: #edf2f7;
}

.pet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  color: white;
  z-index: 2;
}

.tag.lost {
  background: #ef233c;
}

.pet-content {
  padding: 16px;
}

.pet-content h3 {
  font-size: 18px;
  margin-bottom: 4px;
}

.pet-content p {
  color: #64748b;
  margin-bottom: 8px;
}

.pet-content small {
  display: block;
  color: #526179;
  margin-top: 5px;
}


/* =====================================
   HOW IT WORKS — SCREENSHOT STYLE
===================================== */

.how {
  padding: 64px 6% 40px;
  background: #ffffff;
  text-align: center;
}

.how h2 {
  margin: 0 0 4px;
  color: #020f2e;
  font-size: 31px;
  line-height: 1.2;
  font-weight: 900;
}

.how > p {
  margin: 0 0 28px;
  color: #081537;
  font-size: 16px;
}

.steps {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}

.step-card {
  position: relative;
  min-height: 152px;
  padding: 25px 16px 18px;
  background: #ffffff;
  border: 1px solid #dfe5ef;
  border-radius: 13px;
  text-align: center;
  box-shadow: 0 10px 22px rgba(5, 25, 68, 0.11);
}

/* dotted connector between the cards */
.step-card:not(:last-child)::after {
  content: "•••";
  position: absolute;
  top: 50%;
  right: -31px;
  transform: translateY(-50%);
  color: #94a9d8;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* numbered circle */
.step-card > span:first-child {
  position: absolute;
  top: -11px;
  left: 16px;
  width: 39px;
  height: 39px;
  margin: 0;
  display: grid;
  place-items: center;
  border: 3px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.15);
}

.step-card:nth-child(1) > span:first-child {
  background: #176fe8;
}

.step-card:nth-child(2) > span:first-child {
  background: #08b778;
}

.step-card:nth-child(3) > span:first-child {
  background: #ff9416;
}

.step-card:nth-child(4) > span:first-child {
  background: #6c3ee3;
}

/* Any icon element placed after the number */
.step-card .step-icon,
.step-card .icon {
  width: 57px;
  height: 57px;
  margin: 0 auto 3px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 32px;
}

.step-card:nth-child(1) .step-icon,
.step-card:nth-child(1) .icon {
  background: #edf4ff;
}

.step-card:nth-child(2) .step-icon,
.step-card:nth-child(2) .icon {
  background: #e9fbf4;
}

.step-card:nth-child(3) .step-icon,
.step-card:nth-child(3) .icon {
  background: #fff5e8;
}

.step-card:nth-child(4) .step-icon,
.step-card:nth-child(4) .icon {
  background: #f4edff;
}

.step-card h3 {
  margin: 0 0 4px;
  color: #050b1d;
  font-size: 17px;
  font-weight: 900;
}

.step-card p {
  margin: 0;
  color: #06102c;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 1050px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .step-card::after {
    display: none;
  }
}

@media (max-width: 650px) {
  .how {
    padding: 48px 18px 35px;
  }

  .how h2 {
    font-size: 28px;
  }

  .how > p {
    font-size: 14px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* AI IMAGE SEARCH */

.ai-search-section {
  padding: 80px 6%;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px;
  align-items: center;
}

.section-chip {
  display: inline-block;
  background: white;
  color: #2457f5;
  border: 1px solid #dbeafe;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  margin-bottom: 18px;
}

.ai-left h2 {
  font-size: 42px;
  margin-bottom: 16px;
}

.ai-left p {
  color: #64748b;
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 24px;
}

.ai-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.ai-features div {
  background: white;
  border: 1px solid #edf2fb;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.ai-upload-card {
  background: white;
  border: 2px dashed #2457f5;
  border-radius: 28px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(37, 87, 245, 0.13);
}

.upload-icon {
  width: 86px;
  height: 86px;
  background: #eff6ff;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 42px;
  margin: 0 auto 20px;
}

.ai-upload-card h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.ai-upload-card p {
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}

.upload-btn {
  display: inline-block;
  background: #2457f5;
  color: white;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ai-note {
  margin-top: 24px;
  background: #f8fbff;
  color: #334155;
  padding: 14px;
  border-radius: 14px;
  font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
  .nav-links {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  .search-card {
    margin: auto;
  }

  .stats,
  .pet-grid,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .ai-search-section {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ai-left p {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 650px) {
  .navbar {
    height: auto;
    padding: 16px 5%;
    flex-direction: column;
    gap: 14px;
  }

  .nav-actions {
    width: 100%;
  }

  .nav-actions .btn {
    flex: 1;
  }

  .hero {
    padding: 45px 5%;
  }

  .hero h1 {
    font-size: 42px;
  }

  .search-card {
    height: auto;
    flex-direction: column;
    padding: 16px;
  }

  .search-card input,
  .search-card button {
    width: 100%;
  }

  .hero-right {
    min-height: 360px;
  }

  .pet-circle {
    width: 320px;
    height: 320px;
  }

  .pet-circle::before {
    width: 380px;
    height: 380px;
    top: -30px;
    left: -30px;
  }

  .dog-img {
    width: 190px;
    height: 240px;
    left: 20px;
  }

  .cat-img {
    width: 145px;
    height: 210px;
    right: 15px;
  }

  .float-card {
    display: none;
  }

  .stats,
  .pet-grid,
  .steps,
  .ai-features,
  .footer {
    grid-template-columns: 1fr;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/* =====================================
   LOST PET PAGE
===================================== */

.lost-page-hero{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    text-align:center;
    padding:80px 8%;
}

.lost-chip{
    display:inline-block;
    background:rgba(255,255,255,.18);
    padding:10px 22px;
    border-radius:50px;
    font-weight:700;
    margin-bottom:20px;
}

.lost-page-hero h1{
    font-size:52px;
    margin-bottom:15px;
}

.lost-page-hero p{
    max-width:700px;
    margin:auto;
    font-size:18px;
    line-height:1.7;
    opacity:.95;
}

/* FORM */

.lost-form-wrap{
    padding:70px 8%;
    background:#f5f8ff;
}

.lost-form{
    max-width:1200px;
    margin:auto;
}

/* Progress */

.form-progress{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-bottom:35px;
}

.progress-step{
    flex:1;
    background:#e5e7eb;
    padding:16px;
    text-align:center;
    border-radius:14px;
    font-weight:700;
    color:#64748b;
}

.progress-step.active{
    background:#2563eb;
    color:white;
}

/* Card */

.form-card{
    background:white;
    border-radius:22px;
    padding:35px;
    margin-bottom:28px;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
}

.form-card h2{
    color:#2563eb;
    margin-bottom:28px;
    font-size:28px;
}

/* Grid */

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.field{
    display:flex;
    flex-direction:column;
}

.field label{
    margin-bottom:8px;
    font-weight:700;
    color:#334155;
}

.field input,
.field select,
.field textarea{
    border:1px solid #dbe3f0;
    border-radius:14px;
    padding:15px;
    font-size:15px;
    transition:.25s;
    background:white;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.field textarea{
    min-height:150px;
    resize:vertical;
}

.full{
    margin-top:22px;
}

/* Upload */

.photo-upload{
    border:3px dashed #2563eb;
    border-radius:22px;
    text-align:center;
    padding:55px;
    background:#f8fbff;
}

.photo-icon{
    width:90px;
    height:90px;
    border-radius:22px;
    background:#eaf2ff;
    display:grid;
    place-items:center;
    margin:auto;
    font-size:42px;
}

.photo-upload h3{
    margin-top:20px;
    margin-bottom:10px;
    font-size:28px;
}

.photo-upload p{
    color:#64748b;
    margin-bottom:22px;
}

.photo-upload input{
    width:100%;
    padding:16px;
    border-radius:12px;
    border:1px solid #dbe3f0;
    cursor:pointer;
}

/* Buttons */

.form-actions-row{
    display:flex;
    justify-content:flex-end;
    gap:18px;
    margin-top:35px;
}

/* Hover */

.form-card:hover{
    transform:translateY(-4px);
    transition:.3s;
}

/* Responsive */

@media(max-width:900px){

.form-grid{
grid-template-columns:1fr;
}

.form-progress{
flex-direction:column;
}

.form-actions-row{
flex-direction:column;
}

.form-actions-row .btn{
width:100%;
}

.lost-page-hero h1{
font-size:38px;
}

.form-card{
padding:24px;
}

.photo-upload{
padding:35px 20px;
}

}
/* =====================================
   AI SEARCH PAGE
===================================== */

.ai-hero {
  background: linear-gradient(135deg, #111a46, #2457f5);
  color: white;
  text-align: center;
  padding: 90px 8%;
}

.ai-hero h1 {
  font-size: 54px;
  margin-bottom: 16px;
}

.ai-hero p {
  max-width: 720px;
  margin: auto;
  font-size: 18px;
  line-height: 1.7;
  color: #e5edff;
}

.ai-container {
  padding: 70px 8%;
  background: #f5f8ff;
  display: flex;
  justify-content: center;
}

.ai-card {
  width: 100%;
  max-width: 760px;
  background: white;
  border-radius: 28px;
  padding: 50px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
  border: 1px solid #edf2fb;
}

.upload-circle {
  width: 96px;
  height: 96px;
  background: #eff6ff;
  color: #2457f5;
  border-radius: 28px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  font-size: 46px;
}

.ai-card h2 {
  font-size: 34px;
  margin-bottom: 10px;
}

.ai-card p {
  color: #64748b;
  margin-bottom: 24px;
}

.ai-card input[type="file"] {
  width: 100%;
  border: 2px dashed #2457f5;
  border-radius: 18px;
  padding: 22px;
  background: #f8fbff;
  margin-bottom: 24px;
  cursor: pointer;
}

#previewArea {
  display: none;
  margin: 10px auto 24px;
}

#previewImage {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
}

.scan-section {
  display: none;
  padding: 60px 8%;
  background: white;
  text-align: center;
}

.scan-box {
  max-width: 620px;
  margin: auto;
  background: #f8fbff;
  border-radius: 26px;
  padding: 45px;
  border: 1px solid #edf2fb;
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.08);
}

.loader {
  width: 70px;
  height: 70px;
  border: 7px solid #dbeafe;
  border-top: 7px solid #2457f5;
  border-radius: 50%;
  margin: 0 auto 24px;
  animation: spin 1s linear infinite;
}

.scan-box h2 {
  font-size: 30px;
  margin-bottom: 12px;
}

.scan-box p {
  color: #64748b;
  line-height: 1.7;
}

.results-section {
  display: none;
  padding: 70px 8%;
  background: #f5f8ff;
}

.results-section h2 {
  text-align: center;
  font-size: 38px;
  margin-bottom: 34px;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.match-card {
  background: white;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  border: 1px solid #edf2fb;
  transition: 0.3s;
}

.match-card:hover {
  transform: translateY(-6px);
}

.match-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 18px;
  background: #e5e7eb;
}

.match-card h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.match-card p {
  color: #64748b;
  margin-bottom: 8px;
}

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

@media (max-width: 900px) {
  .ai-hero h1 {
    font-size: 38px;
  }

  .ai-card {
    padding: 30px 22px;
  }

  .results-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   DYNAMIC HOMEPAGE REPORTS
===================================== */

.tag.found {
  background: #02a95a;
}

.pet-card-actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 15px;
}

.pet-action-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  transition: 0.25s ease;
}

.pet-action-btn:hover {
  transform: translateY(-2px);
}

.call-btn {
  background: #2457f5;
}

.whatsapp-btn {
  background: #02a95a;
}

.contact-unavailable {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  background: #f1f5f9;
  color: #64748b;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.homepage-loading,
.homepage-empty,
.homepage-error {
  grid-column: 1 / -1;
  padding: 45px 24px;
  background: #ffffff;
  border: 1px solid #edf2fb;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.07);
}

.homepage-loading p,
.homepage-empty p,
.homepage-error p {
  margin-top: 10px;
  color: #64748b;
}

.homepage-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border: 5px solid #dbeafe;
  border-top-color: #2457f5;
  border-radius: 50%;
  animation: homepageSpin 0.8s linear infinite;
}

.homepage-error h3 {
  color: #ef233c;
}

.homepage-error button {
  margin-top: 18px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  background: #2457f5;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

@keyframes homepageSpin {
  to {
    transform: rotate(360deg);
  }
}
/* ===== LOST & FOUND STATUS ===== */

.tag.lost{
    background:#2563eb;
    color:#fff;
}

.tag.found{
    background:#22c55e;
    color:#fff;
}
/* ===== STATUS BADGE ===== */

.status-badge{
    display:inline-block;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    text-transform:uppercase;
    margin:10px 0;
}

.status-badge.lost{
    background:#2563eb;
}

.status-badge.found{
    background:#22c55e;
}
/* Lost and Found active navigation colours */

.nav-links a.lost-active {
  color: #ef233c;
  font-weight: 800;
}

.nav-links a.found-active {
  color: #02a95a;
  font-weight: 800;
}

.nav-links a.lost-active::after,
.nav-links a.found-active::after {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 6px;
  border-radius: 10px;
}

.nav-links a.lost-active::after {
  background: #ef233c;
}

.nav-links a.found-active::after {
  background: #02a95a;
}
/* =====================================
   LOST PAGE RED THEME
===================================== */

.lost-theme .lost-page-hero {
  background: linear-gradient(135deg, #ef233c, #c1121f);
}

.lost-theme .lost-chip {
  background: rgba(255, 255, 255, 0.2);
}

.lost-theme .progress-step.active {
  background: #ef233c;
  color: #ffffff;
}

.lost-theme .form-card h2 {
  color: #ef233c;
}

.lost-theme .field input:focus,
.lost-theme .field select:focus,
.lost-theme .field textarea:focus {
  border-color: #ef233c;
  box-shadow: 0 0 0 4px rgba(239, 35, 60, 0.12);
}

.lost-theme .photo-upload {
  border-color: #ef233c;
}

.lost-theme .photo-icon {
  background: #fff1f2;
}

.lost-theme .nav-links a.active {
  color: #ef233c;
}


/* =====================================
   FOUND PAGE GREEN THEME
===================================== */

.found-theme .lost-page-hero {
  background: linear-gradient(135deg, #02a95a, #008f4c);
}

.found-theme .lost-chip {
  background: rgba(255, 255, 255, 0.2);
}

.found-theme .progress-step.active {
  background: #02a95a;
  color: #ffffff;
}

.found-theme .form-card h2 {
  color: #02a95a;
}

.found-theme .field input:focus,
.found-theme .field select:focus,
.found-theme .field textarea:focus {
  border-color: #02a95a;
  box-shadow: 0 0 0 4px rgba(2, 169, 90, 0.12);
}

.found-theme .photo-upload {
  border-color: #02a95a;
}

.found-theme .photo-icon {
  background: #ecfdf5;
}

.found-theme .nav-links a.active {
  color: #02a95a;
}
.progress-step {
  cursor: pointer;
  transition: 0.25s ease;
}

.progress-step:hover {
  transform: translateY(-2px);
}

.form-card {
  scroll-margin-top: 120px;
}
/* AI Search mode clean layout */

.search-mode-box {
  margin-bottom: 30px;
}

.search-mode-box h3 {
  margin-bottom: 20px;
  text-align: center;
}

.search-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.search-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  background: #ffffff;
  transition: 0.25s ease;
}

.search-mode-option input {
  margin-top: 4px;
  flex-shrink: 0;
}

.search-mode-option span {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.search-mode-option strong {
  font-size: 16px;
  color: #0f172a;
}

.search-mode-option small {
  font-size: 13px;
  line-height: 1.4;
  color: #64748b;
}

.lost-mode:has(input:checked) {
  border-color: #ef233c;
  background: #fff1f2;
}

.found-mode:has(input:checked) {
  border-color: #02a95a;
  background: #ecfdf5;
}

@media (max-width: 700px) {
  .search-mode-options {
    grid-template-columns: 1fr;
  }
}
/* =====================================
   AUTH PAGE
===================================== */

.auth-page {
  min-height: 100vh;
  background:
    linear-gradient(
      135deg,
      rgba(36, 87, 245, 0.08),
      rgba(2, 169, 90, 0.08)
    );
}

.auth-main {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.auth-card {
  width: 100%;
  max-width: 520px;
  padding: 38px;
  background: #ffffff;
  border: 1px solid #e7edf7;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.auth-heading {
  margin-bottom: 26px;
  text-align: center;
}

.auth-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: #eef4ff;
  font-size: 36px;
}

.auth-heading h1 {
  margin-bottom: 9px;
  color: #0f172a;
  font-size: 29px;
}

.auth-heading p {
  color: #64748b;
  line-height: 1.6;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 25px;
  padding: 6px;
  background: #f1f5f9;
  border-radius: 14px;
}

.auth-tab {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.auth-tab.active {
  background: #2457f5;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(36, 87, 245, 0.22);
}

.auth-form {
  display: none;
}

.auth-form.active {
  display: block;
}

.auth-form .field {
  margin-bottom: 18px;
}

.password-field {
  position: relative;
}

.password-field input {
  width: 100%;
  padding-right: 52px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  font-size: 19px;
  cursor: pointer;
}

.auth-submit-btn {
  width: 100%;
  margin-top: 7px;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: #2457f5;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.25s ease;
}

.auth-submit-btn:hover {
  transform: translateY(-2px);
}

.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.forgot-password-btn {
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: #2457f5;
  font-weight: 750;
  cursor: pointer;
}

.auth-message {
  min-height: 22px;
  margin-top: 20px;
  padding: 0;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.auth-message.success,
.auth-message.error {
  padding: 12px;
}

.auth-message.success {
  background: #ecfdf5;
  color: #047857;
}

.auth-message.error {
  background: #fff1f2;
  color: #be123c;
}

@media (max-width: 600px) {
  .auth-card {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .auth-heading h1 {
    font-size: 24px;
  }
}
.btn-signup {
  background: #02a95a;
  color: #ffffff;
  border: 1px solid #02a95a;
}

.btn-signup:hover {
  background: #008f4c;
  border-color: #008f4c;
  transform: translateY(-2px);
}
.message {
  display: none;
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 600;
  text-align: center;
}

.message.success {
  display: block;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}

.message.error {
  display: block;
  color: #991b1b;
  background: #dbeafe;
  border: 1px solid #fca5a5;
}
.details-btn {
  color: white;
  background: #3158f5;
}

.details-btn:hover {
  background: #2148c7;
}
.details-btn {
  color: white;
  background: #3158f5;
}

.details-btn:hover {
  background: #2148c7;


/* Keep desktop navigation separate from the FindMyPet India logo. */
@media (min-width: 1051px) {
  .navbar-content {
    padding-left: 26px;
  }
}
}
.view-all-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lost-view-link {
  background: #2563eb;
  color: #fff !important;
}

.lost-view-link:hover {
  background: #1d4ed8;
  color: #fff !important;
}

.found-view-link {
  background: #16a34a;
  color: #fff !important;
}

.found-view-link:hover {
  background: #15803d;
  color: #fff !important;
}
.lost-view-link {
  background: #2563eb;
}

.lost-view-link:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.found-view-link {
  background: #16a34a;
}

.found-view-link:hover {
  background: #15803d;
  transform: translateY(-1px);
}
/* ===== Homepage View Buttons ===== */

.view-all-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 22px;

  border-radius: 50px;

  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;

  color: #fff !important;

  transition: all .25s ease;

  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.view-all-link:hover{
  transform: translateY(-3px);
}

.lost-view-link{
  background: linear-gradient(135deg,#ff4d4f,#e11d48);
}

.lost-view-link:hover{
  background: linear-gradient(135deg,#e11d48,#be123c);
}

.found-view-link{
  background: linear-gradient(135deg,#22c55e,#16a34a);
}

.found-view-link:hover{
  background: linear-gradient(135deg,#16a34a,#15803d);
}
#guestActions,
#userActions {
  display: flex;
  align-items: center;
  gap: 12px;
}

#userActions[hidden],
#guestActions[hidden] {
  display: none !important;
}

#logoutButton {
  cursor: pointer;
}
#guestActions,
#userActions {
  align-items: center;
  gap: 12px;
}
.btn-dashboard {
  color: #ffffff !important;
  background: #3158f5;
  border: 1px solid #3158f5;

  box-shadow:
    0 8px 20px
    rgba(49, 88, 245, 0.22);
}

.btn-dashboard:hover {
  color: #ffffff !important;
  background: #2148c7;
  border-color: #2148c7;

  transform: translateY(-1px);
}

#navbarLogoutButton {
  cursor: pointer;
}

#navbarLogoutButton:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.btn-warning {
  width: 100%;
  margin-top: 10px;
  padding: 13px 18px;

  display: inline-flex;
  justify-content: center;
  align-items: center;

  border-radius: 12px;

  background: #f59e0b;
  color: #ffffff;

  text-decoration: none;
  font-weight: 800;

  transition: 0.2s ease;
}

.btn-warning:hover {
  background: #d97706;
  transform: translateY(-1px);
}
/* =========================================
   COMMUNITY BANNER
========================================= */

.community-banner {
  width: 100%;
  padding: 36px 6% 48px;
  background: #ffffff;
}

.community-banner-image {
  width: 100%;
  max-width: 1380px;
  height: auto;

  display: block;
  margin: 0 auto;

  border-radius: 26px;

  box-shadow:
    0 20px 55px
    rgba(15, 23, 42, 0.12);
}

/* Tablet */

@media (max-width: 900px) {
  .community-banner {
    padding: 28px 22px 40px;
  }

  .community-banner-image {
    border-radius: 20px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .community-banner {
    padding: 20px 14px 34px;
  }

  .community-banner-image {
    width: 100%;
    height: auto;
    border-radius: 16px;
  }
}
/* =========================================
   FIX HORIZONTAL SCROLL
========================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.community-banner {
  width: 100%;
  max-width: 100%;
  padding: 32px 24px 44px;
  overflow: hidden;
}

.community-banner-image {
  width: 100%;
  max-width: 100%;
  height: auto;

  display: block;
  margin: 0 auto;

  object-fit: contain;
  border-radius: 24px;
}

/* Mobile */

@media (max-width: 768px) {
  .community-banner {
    padding: 20px 12px 32px;
  }

  .community-banner-image {
    border-radius: 16px;
  }
}

/* =========================================
   FINDMYPET INDIA FOOTER — SCREENSHOT STYLE
========================================= */

.site-footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 30px 44px 13px;
  background: linear-gradient(110deg, #071d4d 0%, #061a46 48%, #091e54 100%);
  color: #ffffff;
}

.footer-glow {
  display: none;
}

.footer-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1270px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.85fr 1.65fr;
  gap: 50px;
  align-items: start;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 24px;
  font-weight: 900;
  white-space: nowrap;
}

.footer-logo strong {
  color: #1e7eff;
}

.footer-logo-icon {
  font-size: 27px;
}

.footer-tagline {
  margin: 18px 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.45;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-socials a {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #19366d;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
  transition: 0.25s ease;
}

.footer-socials a:hover {
  background: #287cf2;
  transform: translateY(-3px);
}

.footer-column h3 {
  margin: 1px 0 14px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-links a {
  width: fit-content;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  transition: 0.25s ease;
}

.footer-links a:hover {
  color: #55a0ff;
  transform: translateX(3px);
}

.footer-founder {
  text-align: center;
}

.founder-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 10px;
  padding: 4px 18px;
  border-radius: 20px;
  background: linear-gradient(90deg, #287cf2, #665ae5);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.footer-founder h2 {
  margin: 0 0 2px;
  color: #ffffff;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 900;
}

.founder-nickname {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
}

.founder-role {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.founder-description {
  max-width: 390px;
  margin: 0 auto 12px;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
}

.founder-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid #1b448e;
  border-radius: 8px;
  background: #112f69;
  color: #47a0ff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: 0.25s ease;
}

.founder-email:hover {
  background: #19438c;
  color: #ffffff;
}

.footer-bottom {
  position: relative;
  z-index: 2;
  max-width: 1270px;
  margin: 16px auto 0;
  padding-top: 0;
  border-top: 0;
  text-align: center;
  color: #ffffff;
}

.footer-bottom p {
  margin: 4px 0;
  color: #ffffff;
  font-size: 12px;
}

.developer-credit {
  margin-top: 4px;
}

.developer-credit a,
.developer-credit span {
  color: #2490ff;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1000px) {
  .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }
}

@media (max-width:700px){

.site-footer{
    padding:45px 40px 18px;
}

.footer-container{
    grid-template-columns:1fr;
    gap:32px;
    text-align:center;
}

.footer-brand{
    text-align:center;
}

.footer-logo{
    justify-content:center;
}

.footer-socials{
    justify-content:center;
}

.footer-links{
    align-items:center;
}

.footer-founder{
    margin-top:15px;
    text-align:center;
}

.footer-founder h2{
    font-size:28px;
    line-height:1.2;
}

.footer-founder p{
    font-size:15px;
}

.footer-email{
    width:100%;
    justify-content:center;
}

.footer-bottom{
    margin-top:25px;
    text-align:center;
}
}
.footer-links{
    align-items:center;
}

.footer-links a{
    display:inline-block;
}

}
  .footer-logo,
  .footer-socials {
    justify-content: center;
  }

  .footer-logo {
    white-space: normal;
  }

  .footer-links {
    align-items: center;
  }

  .footer-founder h2 {
    font-size: 25px;
  }
}
/* ===========================
   PREMIUM FOUNDER CARD
=========================== */

.footer-founder{
    grid-column:1/-1;
    display:flex;
    justify-content:center;
    margin-top:40px;
}

.founder-card{

    width:100%;
    max-width:760px;

    padding:42px;

    border-radius:30px;

    text-align:center;

    background:linear-gradient(135deg,#16213e,#1d4ed8);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 20px 60px rgba(0,0,0,.35);

    position:relative;

    overflow:hidden;

}

.founder-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-120px;

    right:-120px;

}

.founder-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:999px;

    background:#3158f5;

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.founder-avatar{

    width:95px;

    height:95px;

    border-radius:50%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    background:#fff;

    color:#3158f5;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    margin-bottom:18px;

}

.founder-card h2{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:6px;

}

.founder-nickname{

    color:#bfdbfe;

    font-size:18px;

    font-weight:700;

    margin-bottom:18px;

}

.founder-role{

    color:#e2e8f0;

    font-size:16px;

    font-weight:600;

    margin-bottom:22px;

}

.founder-description{

    max-width:560px;

    margin:auto;

    color:#dbeafe;

    line-height:1.8;

    font-size:16px;

}

.founder-email{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding:14px 28px;

    border-radius:15px;

    text-decoration:none;

    background:#fff;

    color:#1d4ed8;

    font-weight:700;

    transition:.3s;

}

.founder-email:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(0,0,0,.2);

}

.footer-description{

    margin:20px 0;

    color:#cbd5e1;

    line-height:1.8;

}

.footer-links a{

    transition:.25s;

}

.footer-links a:hover{

    transform:translateX(6px);

    color:#60a5fa;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.footer-founder{

margin-top:28px;

}

.founder-card{

padding:28px 22px;

border-radius:24px;

}

.founder-card h2{

font-size:28px;

}

.founder-role{

font-size:15px;

}

.founder-description{

font-size:15px;

line-height:1.7;

}

.founder-avatar{

width:82px;

height:82px;

font-size:36px;

}

.footer-description{

font-size:15px;

}

}
/* =========================================
   CORRECT MOBILE RESPONSIVE NAVBAR
========================================= */

@media screen and (max-width: 1050px) {
  .navbar {
    height: auto;
    min-height: 70px;
    padding: 14px 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    overflow: visible;
  }

  .logo {
    flex-shrink: 0;
  }

  .nav-links {
    display: none !important;
  }

  .nav-actions {
    width: auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

@media screen and (max-width: 650px) {
  .navbar {
    padding: 12px 14px;
  }

  .logo {
    font-size: 16px;
    gap: 7px;
  }

  .logo-icon {
    font-size: 26px;
  }

  .nav-actions {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
  }

  .nav-actions .btn,
  .nav-actions a,
  .nav-actions button {
    flex: 1;
    min-width: 90px;
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
  }

  .hero {
    width: 100%;
    padding: 40px 18px;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero h1 {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -1px;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-right {
    width: 100%;
    min-height: 340px;
  }

  .search-card {
    width: 100%;
    max-width: 100%;
  }
}

/* AI icon text inside How It Works */
.step-card:nth-child(2) .step-icon {
  width: 48px;
  height: 48px;
  margin-top: 7px;
  margin-bottom: 5px;
  border-radius: 9px;
  background: #27c979;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 4px 9px rgba(14, 175, 101, 0.25);
}
@media (max-width: 650px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .step-card {
    min-height: 165px;
    padding: 28px 12px 16px;
  }

  .step-card h3 {
    font-size: 16px;
  }

  .step-card p {
    font-size: 13px;
  }

  .footer-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-logo,
  .footer-socials {
    justify-content: center;
  }

  .footer-links {
    align-items: center;
  }

  .footer-founder {
    text-align: center;
  }
}

@media (max-width: 420px) {
  .steps {
    grid-template-columns: 1fr;
  }
}
/* MOBILE NAVBAR FIX */

@media (max-width: 1050px) {
  .nav-links {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }

  .navbar {
    height: auto;
    min-height: 74px;
    padding: 14px 5%;
    flex-wrap: wrap;
    gap: 14px;
  }

  .nav-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

@media (max-width: 650px) {
  .nav-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .nav-links a {
    font-size: 15px;
  }

  .nav-actions {
    flex-direction: column;
  }

  .nav-actions .btn {
    width: 100%;
  }
}
/* =========================================
   MOBILE NAVBAR LIKE DESKTOP
========================================= */

@media screen and (max-width: 650px) {

  .navbar {
    min-height: 68px;
    height: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .navbar::-webkit-scrollbar {
    display: none;
  }

  .logo {
    flex: 0 0 auto;
    font-size: 16px;
    gap: 7px;
  }

  .logo-icon {
    font-size: 27px;
  }

  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .nav-links li {
    flex: 0 0 auto;
  }

  .nav-links a {
    font-size: 13px;
    white-space: nowrap;
  }

  .nav-actions,
  #guestActions,
  #userActions {
    width: auto !important;
    margin-left: 8px;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .nav-actions .btn,
  #guestActions .btn,
  #userActions .btn {
    width: auto !important;
    min-width: max-content;
    flex: 0 0 auto !important;
    padding: 10px 14px;
    font-size: 12px;
    border-radius: 10px;
  }

  .hero {
    padding-top: 42px;
  }
}
/* =========================================
   MOBILE HAMBURGER NAVBAR
   DESKTOP WILL REMAIN UNCHANGED
========================================= */

/* Desktop par mobile controls hide */
.mobile-menu-button,
.mobile-menu-header,
.mobile-menu-overlay {
  display: none;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.nav-links {
  display: flex;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Sirf mobile */
@media screen and (max-width: 768px) {

  .site-header {
    position: sticky;
    top: 0;
    z-index: 5000;
  }

  .navbar {
    width: 100%;
    height: 72px;
    min-height: 72px;
    padding: 0 18px;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    overflow: visible;
  }

  .navbar > .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .navbar > .logo .logo-icon {
    font-size: 30px;
  }

  /* Hamburger button */
  .mobile-menu-button {
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 1px solid #dbe3f0;
    border-radius: 13px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    z-index: 5102;
  }

  .mobile-menu-button span {
    display: block;
    width: 23px;
    height: 3px;
    border-radius: 20px;
    background: #0f172a;
    transition: 0.25s ease;
  }

  .mobile-menu-button.menu-button-active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-menu-button.menu-button-active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-button.menu-button-active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Dark overlay */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 5098;
  }

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

  /* Slide menu */
  .navbar-content {
    position: fixed;
    top: 0;
    right: 0;
    width: min(88%, 360px);
    height: 100dvh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transform: translateX(105%);
    transition: transform 0.32s ease;
    box-shadow: -18px 0 50px rgba(15, 23, 42, 0.18);
    overflow-y: auto;
    z-index: 5100;
  }

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

  /* Mobile drawer heading */
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
  }

  .mobile-menu-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #0f172a;
    text-decoration: none;
    font-size: 17px;
  }

  .mobile-menu-logo span {
    font-size: 29px;
  }

  .mobile-menu-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
  }

  /* Links */
  .navbar-content .nav-links {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .navbar-content .nav-links li {
    width: 100%;
  }

  .navbar-content .nav-links a {
    width: 100%;
    min-height: 50px;
    padding: 13px 15px;
    display: flex;
    align-items: center;
    border-radius: 12px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s ease;
  }

  .navbar-content .nav-links a:hover {
    background: #eef4ff;
    color: #2457f5;
    transform: none;
  }

  .navbar-content .nav-links a.active {
    background: #eaf1ff;
    color: #2457f5;
  }

  /* Dashboard and logout */
  .navbar-content .nav-actions {
    width: 100% !important;
    margin: auto 0 0 !important;
    padding-top: 20px;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 11px;
    border-top: 1px solid #e2e8f0;
  }

  .navbar-content .nav-actions .btn {
    width: 100% !important;
    min-height: 50px;
    margin: 0;
    padding: 13px 16px;
    flex: none !important;
    border-radius: 12px;
    font-size: 15px;
  }

  .navbar-content .btn-dashboard {
    background: #3158f5;
    color: #ffffff !important;
  }

  .navbar-content #navbarLogoutButton {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #dbe3f0;
  }

  .mobile-menu-body-lock {
    overflow: hidden;
  }
/* ===== Mobile Footer (Centered 2 Columns) ===== */

.footer-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    align-items:start;
    justify-items:center;
}

.footer-brand,
.footer-founder,
.footer-bottom{
    grid-column:1 / -1;
}

.footer-column{
    width:100%;
    text-align:center;
}

.footer-column h3{
    text-align:center;
    margin-bottom:16px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}

.footer-links li{
    width:100%;
    text-align:center;
}

.footer-links a{
    display:inline-block;
}
/* =========================================
   FINDMYPET INDIA SHARED NAVBAR
========================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e7ebf1;
  box-shadow: 0 4px 18px rgba(16, 24, 40, 0.06);
  backdrop-filter: blur(14px);
}

.navbar {
  width: min(1240px, calc(100% - 32px));
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #172033;
  font-size: 21px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: -0.4px;
}

.logo b{
    color:#2563eb !important;
}

.logo-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(135deg, #fff1ef, #ffe1dd);
  border: 1px solid #ffc9c3;
  font-size: 24px;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  flex: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links li {
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #475467;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

.nav-links a:hover {
  color: #d92d20;
  background: #fff1ef;
  transform: translateY(-1px);
}

.nav-links a.active{
    color:#3158f5;
    background:#eef4ff;
    font-weight:700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.nav-actions .btn {
  min-height: 42px;
  padding: 10px 15px;
  border-radius: 11px;
  border: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn-dashboard{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 26px;
    border-radius:16px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    border:none;
    background:linear-gradient(135deg,#4f6df5 0%,#3158f5 100%);
    box-shadow:0 12px 24px rgba(49,88,245,.25);
    transition:.3s;
}

.btn-dashboard:hover{
    background:linear-gradient(135deg,#3158f5 0%,#1d4ed8 100%);
    transform:translateY(-2px);
    box-shadow:0 16px 30px rgba(49,88,245,.35);
}

.nav-actions .btn-light {
  color: #344054;
  background: #f2f4f7;
  border: 1px solid #e1e5eb;
}

.nav-actions .btn-light:hover {
  color: #b42318;
  background: #fff1ef;
  border-color: #ffc9c3;
}

/* Mobile controls hidden on desktop */

.mobile-menu-button {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #e2e6ec;
  border-radius: 11px;
  background: #ffffff;
  cursor: pointer;
}

.mobile-menu-button span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  border-radius: 99px;
  background: #172033;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

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

.mobile-menu-header {
  display: none;
}

:root{

    /* =========================
       BRAND COLORS
    ========================= */

    --primary:#3158F5;
    --primary-hover:#2548E8;

    --dark:#1B1F3B;

    --text:#23324D;

    --muted:#667085;

    --active-bg:#FFF1EF;

    --white:#FFFFFF;

    --border:#E5E7EB;

    --shadow:0 12px 28px rgba(49,88,245,.18);

}
/* ==========================================
   FINAL MOBILE NAVBAR FIX
========================================== */

@media (max-width:1050px){

.mobile-menu-button{
    display:flex !important;
    width:44px;
    height:44px;
    border:none;
    background:#fff;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    z-index:10005;
}

.mobile-menu-button span{
    display:block !important;
    width:24px;
    height:3px !important;
    background:#172033 !important;
    border-radius:10px;
    opacity:1 !important;
    visibility:visible !important;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.navbar-content{
    position:fixed;
    top:0;
    right:-100%;
    width:320px;
    max-width:90%;
    height:100vh;
    background:#fff;
    display:flex;
    flex-direction:column;
    padding:20px;
    overflow-y:auto;
    transition:right .3s ease;
    z-index:10004;
    box-shadow:-10px 0 35px rgba(0,0,0,.15);
}

.navbar-content.mobile-menu-open{
    right:0;
}

.mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    z-index:10003;
}

.mobile-menu-overlay.mobile-menu-overlay-open{
    display:block;
}

.mobile-menu-header{
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.navbar-content .nav-links{
    display:flex !important;
    flex-direction:column !important;
    gap:8px;
    margin:0;
    padding:0;
    list-style:none;
}

.navbar-content .nav-links li{
    width:100%;
}

.navbar-content .nav-links a{
    display:flex !important;
    width:100%;
    padding:14px;
    color:#172033;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
}

.navbar-content .nav-links a:hover,
.navbar-content .nav-links a.active{
    background:#eef4ff;
    color:#2563eb;
}

.navbar-content .nav-actions{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.navbar-content .nav-actions .btn{
    width:100%;
}

}


/* Lost-pet sighting action */
.sighting-btn {
  flex-basis: 100%;
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.sighting-btn:hover {
  color: #7c2d12;
  background: #ffedd5;
}


/* Full visible sighting action in search and AI result cards */
.sighting-btn {
  flex: 1 0 100% !important;
  min-width: 0 !important;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 12px !important;
  color: #9a3412 !important;
  background: #fff7ed !important;
  border: 1px solid #fdba74 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-align: center;
  line-height: 1.25;
}

.sighting-btn:hover {
  color: #7c2d12 !important;
  background: #ffedd5 !important;
}


/* Guaranteed visible "I Spotted This Pet" action */
.pet-card-actions .visible-sighting-action,
.ai-result-actions .visible-sighting-action,
.pet-card-actions .sighting-btn,
.ai-result-actions .sighting-btn {
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 13px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  background: #f97316 !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
}