* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: clip;
  background-color: #f9f5ef;
  max-width: 100%;
  overflow-x:hidden;
}

html {
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
}

/* ================= HERO ================= */

.background-image1 {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 70px);

  background:
  linear-gradient(rgba(40,40,40,0.6), rgba(40,40,40,0.6)),
  url('../images/home2.jpg');

  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: center;   /* FIXED */
  align-items: center;

  text-align: center;
  padding: 20px;
}

@media (max-width: 600px) {
  .background-image1 {
    background:
      linear-gradient(rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.5)),
      url('../images/homeimage.jpg');
    background-size: cover;
  }
}

.homep {
  color: #f6ecec;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.heading {
  color: #f6ecec;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 15px;
}

.apply-container .heading {
  color: #3F8A86;
}
/* ================= NAVBAR ================= */

#navbar{

display:flex;

justify-content:space-between;

align-items:center;

width:100vw;

padding:20px 30px;

box-sizing:border-box;

background:#f9f5ef;

position:sticky;

top:0;

left:0;

z-index:998;

}

#booking img {
  width: 100px;
  cursor: pointer;
}

#logo img {
  width: 120px;
}

#menu {
  width: 65px;
  display: flex;
  justify-content: center;
}


#menu img {
  width: 65px;
  cursor: pointer;
}

@media (max-width: 480px) {
  #booking img { width: 60px; }
  #logo img { width: 80px; }
  #menu img { width: 50px; }
}

#booking,
#menu {
  display: flex;
  align-items: center;
  padding: 0 10px;
}




/* ================= SIDEBAR ================= */

#sidebar {
  position: fixed;
  top: 0;
  right: -100%;
  width: 30%;
  height: 100vh;
  background-color: #3F8A86;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
  z-index: 1001;
  overflow: hidden;
}

@media (max-width: 600px) {
  #sidebar {
    width: 50%;
  }
}



#closesidebar {
  background: transparent;
  border: none;
  align-self: flex-end;
  cursor: pointer;
}

#closesidebar img {
  width: 50px;

}

#sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

.nav-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

#sidebar a {
  text-decoration: none;
  color: #f6ecec;
  font-size: 22px;
}

/* ================= BOOK BUTTON ================= */

#bookbtn,
.optionbtn {
  width: 80%;
  max-width: 300px;
  height: 45px;
  border-radius: 30px;
  background-color: #3F8A86;
  color: #f6ecec;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  margin-top: 20px;
  margin: 20px auto 0; 
  border: none;
}

#bookbtn:active,
.optionbtn:active {
  transform: scale(0.97);
  box-shadow: 0 3px 10px rgba(63,138,134,0.3);
}

a{
  text-decoration: none;
}



/* ================= SERVICE OPTIONS ================= */

#ServiceOptions {
  display: flex ;
  flex-direction: column;
  align-items: center;
}

.hidden {
  display: none !important;
}

/* ================= FORMS (REUSABLE) ================= */

.service-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;   /* controls everything */
  margin: 0 auto;     /* centers form */
  color: #3F8A86;
}

#dailyFields,
#walkFields {
  gap: 10px;
}




.service-form input::placeholder {
  color: #3F8A86;
  opacity: 1;
}

/* submit button */
.form-submit {
  border: 0;
  box-shadow: 0 6px 20px rgba(63,138,134,0.35);
  margin-top: 20px;
  padding: 10px 16px;
  width: 100%;
  background-color:#3F8A86;
  color: #f6ecec;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color 0.25s ease,
              transform 0.15s ease,
              box-shadow 0.15s ease;

}

.form-submit:hover {
  background-color: #a3d3d0;
  transform: translateY(-1px);
  color: #2f6f6c;
}

.form-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  background-color: #f6ecec;
}


/* layout helpers */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-row.two-col {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}

.form-row.two-col .form-group {
  flex: 1;
}

@media (max-width: 400px) {
  .form-row.two-col {
    flex-direction: column;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ================= FILL COLOR SECTION ================= */

#fill-color {
  background-color: #3F8A86;
  width: 100%;
  min-height: 30vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ================= HOW IT WORKS ================= */

#background-image2 {
  background:
    linear-gradient(rgba(40,40,40,0.5), rgba(40,40,40,0.5)),
    url('../images/howitworkss2.jpg');
  min-height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center top;
  color: #f6ecec;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  align-items: center;
  text-align: center;
}

@media (max-width: 600px) {
  #background-image2 {
    background-image:
      linear-gradient(rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.5)),
      url('../images/price.jpg');

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}


#how-it-works {
  display: flex;
  flex-direction: column;
  align-items: center;   
  gap: 20px;
}

#how-it-works .step {
  display: flex;
  align-items: center;
  gap: 15px;

  width: 100%;
  max-width: 360px;     
  margin: 0 auto;  
  transform: translateX(30px);
}

#how-it-works i {
  font-size: 30px;
  min-width: 35px;
}

#how-it-works span {
  font-size: 18px;
  line-height: 1.4;
}

/* ================= SERVICES TABLE ================= */

#services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#services table {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
}

#services td {
  padding: 8px 15px;
}

#services td:first-child {
  text-align: left;
  width: 70%;
}

#services td:last-child {
  text-align: right;
  width: 30%;
}

/* ================= CONTACT FOOTER ================= */

.contact-footer {
  background: rgba(249,245,239,0.95);
  color: #333;
  padding: 20px 30px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  text-align: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;

}

.contact-footer h2 {
  margin-bottom: 15px;
  color: #3F8A86;
}

.contact-item {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
  font-size: 18px;
}

.contact-footer i {
  font-size: 22px;
  color: #3F8A86;
}



.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);

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

  z-index: 2000;
}

.modal-content {
  background: #f9f5ef;
  padding: 30px 25px;
  border-radius: 20px;
  text-align: center;

  max-width: 320px;
  width: 90%;

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-content h2 {
  color: #3F8A86;
  font-size: 20px;
  margin-bottom: 15px;
}

.modal-content p {
  color: #333;
  font-size: 15px;
  margin-bottom: 20px;
  line-height: 1.4;
}

.modal.hidden {
  display: none;
}


.bgimage-3 {
  background: url("../images/in-development.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;    
  height: 100vh;
}

.menu-hidden {
  visibility: hidden;
}


.service-form input[type="date"] {
  width: 100%;
  appearance: none;
}

@media (max-width: 480px) {

  .service-form {
    gap: 8px;
  }

  .service-form label {
    font-size: 14px;
  }

  .service-form input,
  .service-form select {
    padding: 8px 10px;
    font-size: 14px;
    color: #3F8A86;
  }

  .service-form select option {
  color: #333;
}

  .form-submit {
    padding: 12px;
    font-size: 15px;

  }
}


/* ================= INPUT STYLES CLEAN VERSION ================= */

/* BASE */
.service-form .form-input {
  padding: 12px 14px;
  width: 100%;
  font-size: 14px;
  border-radius: 10px;

  border: 2px solid #e0e7e5;   
  background: #ffffff;

  color: #3F8A86;

  box-shadow: 0 4px 10px rgba(0,0,0,0.06); 

  transition: all 0.2s ease;
}

.service-form .form-input:focus {
  border: 2px solid #3F8A86;
  box-shadow: 0 0 0 2px rgba(63, 138, 134, 0.2);
  outline: none;
  border-color: #3F8A86;
  color: #333;
}

.service-form select:invalid {
  color: #3F8A86;
}

/* ERROR (always wins) */
.service-form .form-input.error,
.service-form .form-input.error:focus {
  border: 2px solid #e74c3c;
  background: #ffdede;
}


.form-bottom-error{
  width:100%;
  margin-top:12px;
  background:#ffd6d6;
  border:2px solid #ff4d4d;
  color:#b30000;

  padding:12px;
  border-radius:10px;

  text-align:center;
  font-weight:300;
  font-size:14px;

  box-sizing:border-box;
}

.service-form > .form-bottom-error {
  width: 100%;
}


.form-bottom-error:empty{
  display:none;
}


.terms-container {
  margin-top: 15px;

}

.openTerms {
  color: #3F8A86;
  text-decoration: underline;
  cursor: pointer;
}


/* modal */

/* ================= TERMS MODAL ================= */

.terms-modal {
  position: fixed;
  inset: 0;

  display: none;  /* ONLY THIS */

  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);

  z-index: 3000;

  justify-content: center;
  align-items: center;

  padding: 20px;
}

.terms-modal.active {
  display: flex;
}

.terms-box {
  background: #f9f5ef;

  width: 90%;
  max-width: 520px;

  max-height: 85vh;

  border-radius: 12px;
  padding: 20px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.terms-content {
  max-height: 65vh;
  overflow-y: auto;

  line-height: 1.5;
  font-size: 14px;
}

#closeTerms {
  position: absolute;
  top: 10px;
  right: 15px;

  font-size: 26px;
  cursor: pointer;
}


.pricing-button{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:#3F8A86;
color:#f9f5ef;
border-radius:8px;
text-decoration:none;
font-weight:600;
}

.pricing-button:hover{
opacity:0.9;
}


.pricing-hero{
height:300px;
background:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
url("../images/jahnoanike.jpeg") center/cover no-repeat;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
color:#f9f5ef;
}

.pricing-container{
display:flex;
gap:30px;
justify-content:center;
padding:60px 20px;
flex-wrap:wrap;
background-color: #2f6f6c;
}

.pricing-card{
background:#f9f5ef;
padding:30px;
border-radius:10px;
width:300px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
text-align:center;
}

.pricing-card h2{
margin-bottom:10px;
}

.price{
font-size:22px;
font-weight:600;
margin-bottom:20px;
}

.pricing-card ul{
list-style:none;
padding:0;
}

.pricing-card li{
margin:8px 0;
}

.visit-times{
font-weight:600;
margin-bottom:15px;
}

/* ================= TABLET ================= */

@media (max-width: 900px){

.pricing-container{
gap:20px;
padding:40px 15px;
}

.pricing-card{
width:260px;
padding:25px;
}

}


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

@media (max-width: 600px){

.pricing-hero{
height:220px;
padding:20px;
}

.pricing-hero h1{
font-size:30px;
}

.pricing-hero p{
font-size: 25px;
}

/* stack cards nicely */
.pricing-container{
flex-direction:column;
align-items:center;
padding:40px 15px;
gap:25px;
}

/* cards become full width */
.pricing-card{
width:90%;
max-width:340px;
padding:25px;
}

/* adjust text sizes */
.pricing-card h2{
font-size:26px;
margin-bottom:10px;
}

.price{
font-size:25px;
font-weight:600;
margin-bottom:18px;
}

.pricing-card li{
font-size:23px;
margin:10px 0;

}

.visit-times{
font-size:17px;
font-weight:600;
margin-bottom:15px;

}

  #background-image2 {
    gap: 10px; 
  }

  .pricing-button {
    margin-top: -10px; 
  }

}


/* ================= SMALL PHONES ================= */

@media (max-width: 380px){

.pricing-hero h1{
font-size:20px;
}

.pricing-hero p{
font-size:13px;
}

.pricing-card{
padding:20px;
}

}

.trust-badges {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}

.trust-badges span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #f6ecec
}

.trust-badges i {
  font-size: 18px; 
  color: #3F8A86;
}

/* SITERS PAGE */

.sitters-section{
  background-color: #2f6f6c;
  min-height: 100vh;
  padding:100px 20px;
  text-align:center;
}



.sitters-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;

  padding: 10px 20px;

  max-width: 1200px;
  margin: 0 auto;
}

.sitter-card {
  display: block;
  padding: 15px;
  background: #f9f5ef;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: black;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: 0.2s;
}

.sitter-card:hover{
transform:translateY(-5px);
}

.sitter-exp {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
  white-space: nowrap;
}

.sitter-price {
  font-size: 15px;
  font-weight: 600;
  color: #3F8A86;
  margin-top: 6px;
}

.sitter-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.service-price {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #3F8A86;
  font-weight: 600;
}


.booking-location {
  font-size: 14px;
  margin-bottom: 25px;
  opacity: 0.8;
  color: #f6ecec;
  margin-top: 10px;
}



.hero-content > * {
  animation: fadeUp 0.6s ease forwards;
  max-width: 600px;

}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.social-links {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-links a {
  color: #3F8A86;
  font-size: 22px;
  transition: 0.2s;
}

.social-links a:hover {
  transform: scale(1.2);
  opacity: 0.8;
}



/* ================= SITTER PROFILE ================= */

.sitter-profile {
  margin-top: 80px;
  max-width: 500px;
  margin: 100px auto 40px;
  padding: 25px;
  text-align: center;

  background: #f9f5ef;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* profile image */
.profile-photo {
  width: 100%;
  max-height: 450px;

  object-fit: contain;

  border-radius: 15px;
  margin-bottom: 20px;

  background: #f3f3f3;
}

/* name */
.sitter-profile h1 {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #3F8A86;
}

/* info text */
.sitter-profile p {
  font-size: 15px;
  margin: 6px 0;
  color: #333;
}

/* bio */
.sitter-profile .bio {
  margin-top: 15px;
  line-height: 1.5;
  opacity: 0.9;
}

/* button */
.book-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;

  background: #3F8A86;
  color: #fff;
  border-radius: 25px;

  text-decoration: none;
  font-weight: 600;
  transition: 0.2s;
}

.book-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
} 

.sitters-heading {
  color: #f6ecec;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 15px;
}

.profile-page {
  background: #2f6f6c;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
}


.header-sec{
  background: #3F8A86;
  color: #f9f5ef;
  text-align: center;
  padding: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 999;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.sitters-home {
  padding: 40px 20px;
  background: #2f6f6c;
  text-align: center;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 80px;
}

.sitters-home h2 {
  color: #f6ecec;
  margin-bottom: 20px;
  overflow: visible;

}

.sitters-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 25px;
  -webkit-overflow-scrolling: touch; 
  scroll-behavior: smooth;
  cursor: grab;
  scroll-snap-type: x mandatory;
}

.sitters-scroll .sitter-card {
  scroll-snap-align: start;
}

@media (min-width: 900px) {
  .sitters-scroll {
    justify-content: center;
    overflow-x: auto;
  }
}


/* cards */
.sitters-scroll .sitter-card {
  flex: 0 0 220px;
  width: 220px;
  background: #f9f5ef;
  padding: 15px;
  border-radius: 12px;
  text-decoration: none;
  color: black;
  flex-shrink: 0;
}

.sitter-location {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #777;
}

.sitters-scroll::-webkit-scrollbar {
  height: 6px;
}

.sitters-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 253, 253, 0.4);
  border-radius: 10px;
}

.sitters-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.7);
}

.form-input.error {
  border: 2px solid #ff4d4d;
  background: #ffe6e6;
  box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.2);
}


.become-sitter {
  margin-top: 60px;
  padding: 40px 20px;
  text-align: center;
  background: #f8f8f8;
  border-radius: 12px;
}

.apply-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 24px;
  background: #3F8A86;
  color: #f9f5ef;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}




.apply-section {
  background: #2f6f6c;
  min-height: 100vh;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}

.apply-section .form-input,
.apply-section select,
.apply-section input[type="date"] {
  background: #ffffff;
  color: #3F8A86;

  border: 2px solid #e0e7e5;

  box-shadow: 0 4px 10px rgba(0,0,0,0.06);

  appearance: none;
}

.apply-section input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}

.apply-container {
  background: #d7eee8;
  padding: 30px;
  border-radius: 15px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
  margin:60px auto
}

.apply-header h1 {
  color: #3F8A86;
}

.apply-header p {
  margin-bottom: 20px;
  color: #555;
}

.steps {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 16px;
}

.apply-section .step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply-section .step.active {
  background: #3F8A86;
  color: white;
}

.apply-section .form-step {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.form-step.active {
  display: flex;
}

.form-step input,
.form-step textarea,
.form-step select {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;

  color: #3F8A86;
}

.form-step input::placeholder,
.form-step textarea::placeholder {
  color: #3F8A86;
  opacity: 1;
}

.apply-section textarea {
  resize: none;
  height: 80px;
}

.apply-section .form-navigation {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.apply-section #prevBtn,
.apply-section #nextBtn,
.apply-section .submit-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #3F8A86;
  color: white;
  cursor: pointer;
}

#prevBtn {
  background: #999;
} 

.apply-section .file-label {
  display: block;
  text-align: left;
  margin: 10px 0 5px;
  font-weight: 600;
  color: #333;
}

.apply-section .file-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
}

.checkbox-card {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 12px;

  cursor: pointer;
  transition: 0.2s;

  width: 100%;
}

.checkbox-card:hover {
  border-color: #3F8A86;
  background: #f3fbfa;
}
.checkbox-card input {
  transform: scale(1.2);
  width: 18px;
  height: 18px;
  accent-color: #3F8A86;
}

.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;

  border: 2px dashed #3F8A86;
  padding: 20px;
  border-radius: 10px;

  background: #f3fbfa;
  color: #3F8A86;
  font-weight: 500;

  cursor: pointer;
  transition: 0.2s;
}

.upload-box:hover {
  background: #e8f6f5;
}
.form-step h2 {
  margin-bottom: 10px;
}

.form-label {
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: 600;
  text-align: left;
}

.checkbox-group {
  margin-top: 10px;
  gap: 10px;
}

.submit-btn {
  margin-top: 20px;
}

.checkbox-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-left .icon {
  font-size: 18px;
}

.checkbox-card:hover {
  border-color: #3F8A86;
  background: #f3fbfa;
}

.checkbox-card input:checked {
  transform: scale(1.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.openTerms {
  pointer-events: auto;
}

.terms-container span {
  cursor: pointer;
}

.error {
  border: 2px solid red !important;
  background-color: rgba(255, 0, 0, 0.08);
}

.sitters-home .apply-btn,
.sitters-home .pricing-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}

@media (max-width: 600px) {
  .sitters-home .apply-btn,
  .sitters-home .pricing-button {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin: 12px auto;
  }
}


.footer-background {
  background-color: #3F8A86;
  height: 300px;
  display: flex;
  align-items: center; 
  justify-content: center; 
}

.sitter-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  margin: 30px 0;
}

.filter-btn {
  border: none;
  padding: 10px 18px;

  border-radius: 30px;

  background: #f9f5ef;
  color: #2f6f6c;

  font-weight: 600;
  cursor: pointer;

  transition: 0.2s;
}

.filter-btn:hover {
  background: #dfeeed;
}

.filter-btn.active {
  background: #3F8A86;
  color: white;
}

.filters-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.filters-sidebar {
  width: 240px;
  background: #f9f5ef;
  padding: 20px;
  border-radius: 12px;
  position: sticky;
  top: 100px;
}

.filters-sidebar h3 {
  margin-bottom: 20px;
  color: #2f6f6c;
}

.filter-group {
  margin-bottom: 25px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  text-align: left;
}

.filter-group h4 {
  color: #2f6f6c;
}

.filter-group label {
  display: flex;
  gap: 8px;
  align-items: center;
}

#activeFilters {
  display: flex;
  align-items: center;
  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 20px;
}

.active-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  background: #4a9592;
  color: white;

  padding: 10px 18px;

  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
}

.sitters-content {
  flex: 1;
}

@media (max-width: 900px) {

  .filters-layout {
    flex-direction: column;
  }

  .filters-sidebar {
    width: 100%;
    position: relative;
    top: unset;
  }
}


.filters-topbar {
  display: flex;
  align-items: flex-start;

  gap: 15px;

  margin: 30px 0;

  flex-wrap: wrap;
}

#activeFilters {
  margin-top: 4px;
}

.filter-open-btn {
  background: #f9f5ef;
  color: #2f6f6c;

  border: none;
  padding: 12px 20px;

  border-radius: 30px;

  font-weight: 600;
  cursor: pointer;
}

.filters-panel {
  background: #f9f5ef;

  padding: 20px;
  border-radius: 12px;

  margin-bottom: 30px;

  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.hidden {
  display: none;
}

.sitter-gender {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #444 !important;
  line-height: 1.4;
  margin-top: 5px;
  text-transform: capitalize;
  text-decoration: none !important;
}

.sitter-bio {
  margin-top: 25px;
}

.sitter-bio h3 {
  color: #3F8A86;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
}

.sitter-bio p {
  line-height: 1.6;
}

.profile-services {
  margin-top: 30px;
}

.profile-services h3 {
  color: #3F8A86;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.profile-services .service-card {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 12px;
}

.profile-services .service-card i {
  color: #3F8A86;
  font-size: 20px;
}

.profile-services .service-card span {
  color: #666;
  font-size: 18px;
  font-weight: 500;
}

.sitter-profile .sitter-location {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  font-size: 15px;
  color: #777;

  margin-top: 10px;
}


.location-links{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin:40px 0;
}

.location-link{
    background:#4a9592;
    color:white;
    text-decoration:none;
    padding:12px 20px;
    border-radius:30px;
    font-weight:600;
    transition:0.3s;
}

.location-link:hover{
    background:#3a7d7a;
    transform:translateY(-2px);
}


.profile-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 20px;
}

.sitter-languages,
.completed-bookings {

  background: #eef8f7;

  padding: 10px 16px;

  border-radius: 999px;

  color: #2f6f6c;

  font-weight: 600;

  font-size: 14px;

  margin: 0;
}

.reviews-section{
    background:white;
    padding:60px 20px;
    min-height:400px;
    position:relative;
    z-index:10;
}

.account-page{

min-height:80vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

.account-card{

width:100%;

max-width:550px;

padding:40px;

background:white;

border-radius:20px;

box-shadow:
0 15px 40px rgba(0,0,0,.08);

display:flex;

flex-direction:column;

gap:20px;

}

.account-card h1{

text-align:center;

font-size:2rem;

}

.account-card form{

display:flex;

flex-direction:column;

gap:15px;

}

.account-card form p{

display:flex;

flex-direction:column;

gap:8px;

}

.account-card input{

padding:15px;

border:1px solid #ddd;

border-radius:12px;

font-size:1rem;

}

.account-btn{

display:flex;

justify-content:center;

align-items:center;

padding:16px;

background: #3F8A86;
color:white;

text-decoration:none;

border:none;

border-radius:14px;
font-size:20px;
margin-right:8px;
font-weight:600;

cursor:pointer;
margin-bottom: 12px;
}

.account-btn:hover{

opacity:.9;

}

.account-link{

text-align:center;

}

.account-link a{

color :#3F8A86;

font-weight:600;

text-decoration:none;

}

.account-info{

display:flex;

flex-direction:column;

gap:10px;

}

.account-info p{

margin:0;

}


.form-bottom-success{

background:#dff4f1;

border:2px solid #3F8A86;

padding:12px;

border-radius:10px;

margin-bottom:20px;

color:#2f6f6c;

text-align:center;

}

.service-form ul{

display:none;

}

.service-form input{

margin-bottom:10px;

}

.account-card .helptext{

font-size:13px;

opacity:.7;

text-align:left;

margin-bottom:10px;

}

.account-card{

background:
rgba(
255,
255,
255,
0.88
);

backdrop-filter:
blur(6px);

}


.password-wrapper{
position:relative;
width:100%;
}

.password-wrapper input{
padding-right:60px !important;
}

.password-eye{

position:absolute;

right:16px;

top:50%;

transform:translateY(-75%);

width:24px;

height:24px;

display:flex;

align-items:center;

justify-content:center;

border:none;

background:none;

padding:0;

margin:0;

cursor:pointer;

color:#3F8A86;

font-size:16px;

line-height:1;

z-index:5;

}

.password-eye i{

display:flex;

align-items:center;

justify-content:center;

}

.password-wrapper input{

padding-right:48px !important;

}

.password-eye:hover{
color:#2E7774;
}

.auth-page {
  min-height: 100vh;
  background-image: url("../images/BGIMAGElogin.png");
  background-size: 650px auto;
  background-repeat: repeat;
  background-attachment: fixed;
}

.auth-page .account-page {
  padding-top: 60px; /* move padding here instead */
}

.booking-card{

background:white;

border:1px solid #e5e5e5;

border-radius:14px;

padding:20px;

margin-top:20px;

text-align:left;

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

}

.booking-card h2{

margin-bottom:15px;

color:#6bb7a8;

}

.booking-card p{

margin:10px 0;

}

.booking-status{

padding:6px 14px;

border-radius:999px;

font-weight:600;

display:inline-block;

}

.booking-status.pending{

background:#FFF4CC;

color:#9A6700;

}

.booking-status.assigned{

background:#D8F3FF;

color:#006C9C;

}

.booking-status.confirmed{

background:#D9F7E8;

color:#0F7B4D;

}

.booking-status.completed{

background:#D6F5E3;

color:#18794E;

}

.booking-status.cancelled{

background:#FFE2E2;

color:#B42318;

}


.contact-item{
    text-decoration:none;
    color:inherit;
}

.contact-item:hover{
    opacity:.85;
}

.account-btn i{
    color:inherit;
    margin-right:8px;
    font-size:16px;
}


/* ============================================================
   MY BOOKINGS
   ============================================================ */

.my-bookings-card {
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
}


/* ============================================================
   BOOKING CARD
   ============================================================ */

.my-bookings-card .booking-card {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}


/* ============================================================
   ADMIN APPROVAL
   ============================================================ */

.admin-booking-status {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.65);
}


.admin-booking-status h3 {
    margin-top: 0;
    margin-bottom: 12px;
}


/* ============================================================
   SITTER SECTIONS
   ============================================================ */

.selected-sitter-section,
.choose-sitter-section,
.no-sitter-section {
    margin-top: 25px;
    margin-bottom: 25px;
}


.choose-sitter-description {
    margin-bottom: 20px;
}


/* ============================================================
   ACCEPTED SITTER LIST
   ============================================================ */

.accepted-sitters-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


/* ============================================================
   ACCEPTED SITTER ROW
   ============================================================ */

.accepted-sitter-card {
    width: 100%;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 12px 15px;

    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(0, 0, 0, 0.08);

    overflow: hidden;
}


/* ============================================================
   SITTER IMAGE
   ============================================================ */

.booking-sitter-image-wrapper {
    flex: 0 0 65px;

    width: 65px;
    height: 65px;

    margin: 0;

    border-radius: 50%;
    overflow: hidden;
}


.booking-sitter-image {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;
}


/* ============================================================
   SITTER INFORMATION
   ============================================================ */

.sitter-choice-info {
    flex: 1;

    display: flex;
    flex-direction: column;

    gap: 3px;

    margin: 0;
}


.sitter-choice-info strong {
    font-size: 1rem;
}


.sitter-choice-info small {
    display: block;

    font-size: 0.85rem;

    opacity: 0.7;
}


/* ============================================================
   SITTER ACTIONS
   ============================================================ */

.accepted-sitter-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0;
}


.accepted-sitter-actions form {
    width: auto;
    margin: 0;
}


.accepted-sitter-actions .account-btn {
    width: auto;
    box-sizing: border-box;

    padding: 8px 12px;

    white-space: nowrap;
}


/* ============================================================
   BUTTON RESET
   ============================================================ */

button.account-btn {
    border: none;

    cursor: pointer;

    font-family: inherit;
    font-size: inherit;
}


/* ============================================================
   SELECTED SITTER
   ============================================================ */

.sitter-choice-card {
    width: 100%;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 12px 15px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.9);

    overflow: hidden;

    margin-bottom: 15px;
}


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

@media (max-width: 700px) {

    .accepted-sitter-card {
        align-items: flex-start;
        flex-wrap: wrap;
    }


    .accepted-sitter-actions {
        width: 100%;

        display: flex;

        flex-wrap: wrap;
    }


    .accepted-sitter-actions .account-btn {
        flex: 1;

        text-align: center;
    }


    .sitter-choice-card {
        flex-wrap: wrap;
    }

}

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

@media (max-width: 600px) {

    .my-bookings-card {
        width: 94%;
        max-width: none;
    }


    .accepted-sitter-card {
        padding: 15px;
    }


    .booking-sitter-image-wrapper {
        width: 140px;
        height: 140px;
    }

}

/* ================================================================
   SITTER CARD PRICE LABEL (service shown next to price)
   ================================================================ */

.sitter-price-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #6e7b83;
    margin-top: 2px;
}

/* ================================================================
   ACTION BUTTON HIERARCHY (client booking cards)
   ================================================================ */

.account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.account-btn.action-primary {
    background-color: #3F8A86;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(63, 138, 134, 0.35);
}

.account-btn.action-primary i {
    color: #ffffff !important;
}

.account-btn.action-primary:hover {
    background-color: #458f8b;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.account-btn.action-secondary {
    background: transparent;
    color: #3F8A86 !important;
    border: 2px solid #3F8A86;
    font-weight: 600;
}

.account-btn.action-secondary i {
    color: #3F8A86 !important;
    transition: color 0.2s ease;
}

.account-btn.action-secondary:hover {
    background: rgba(63, 138, 134, 0.08);
    color: #2f6f6c !important;
    border-color: #2f6f6c;
}

.account-btn.action-secondary:hover i {
    color: #2f6f6c !important;
}

.account-btn.action-link-btn,
a.action-link-btn {
    background: transparent;
    color: #3F8A86 !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
    padding: 10px 6px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-btn.action-link-btn i,
a.action-link-btn i {
    color: #3F8A86 !important;
    font-size: 14px;
    margin: 0;
    transition: color 0.2s ease;
}

.account-btn.action-link-btn:hover,
a.action-link-btn:hover {
    color: #2f6f6c !important;
}

.account-btn.action-link-btn:hover i,
a.action-link-btn:hover i {
    color: #2f6f6c !important;
}

.payment-note {
    font-size: 14px;
    color: #555;
    background: #f4efe4;
    border: 1px dashed #cfc4ad;
    border-radius: 10px;
    padding: 10px 14px;
}

/* ================================================================
   CLIENT / SITTER MESSAGING UI
   ================================================================ */

.conversation-list {
    display: flex;
    flex-direction: column;
}

.conversation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.conversation-row:hover {
    background: rgba(63, 138, 134, 0.06);
}

.avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}

span.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3F8A86;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
}

.conversation-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conversation-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.conversation-top strong {
    font-size: 15.5px;
}

.conversation-time {
    color: #98a2ab;
    font-size: 12px;
    white-space: nowrap;
}

.conversation-service {
    color: #3F8A86;
    font-size: 12.5px;
    font-weight: 500;
}

.conversation-preview {
    color: #66727b;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-badge {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #e67e22;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.message-thread.client-chat {
    max-height: 420px;
    background: #f7f4ec;
    border-radius: 14px;
    padding: 16px;
}

/* Booking request, chat and Pet Care Journal */
.meet-greet-request{border:1px solid #d9e8e5;border-radius:18px;padding:20px;margin:22px 0;background:#f7fcfb}.meet-greet-request legend{padding:0 8px;font-weight:700;color:#2f6f6c}.form-help{font-size:14px;color:#61706d;margin-bottom:16px}.chat-composer{display:flex;align-items:center;gap:10px;margin-top:18px}.chat-input{flex:1;min-width:120px;padding:14px 16px;border:2px solid #dfe9e7;border-radius:14px;font:inherit}.image-attach-btn{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:14px;background:#e4f4f1;color:#2f6f6c;cursor:pointer}.image-attach-btn input,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.chat-message-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.message-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#2f6f6c;font-weight:700}.message-image{display:block;max-width:min(320px,100%);max-height:300px;object-fit:cover;border-radius:12px;margin-top:8px}.journal-page{background:#f8f3e9;color:#17324a}.journal-hero{padding:120px 24px 80px;text-align:center;background:linear-gradient(135deg,#dff4f1,#fff8ec)}.journal-hero span,.journal-label{color:#3d8883;font-weight:700;letter-spacing:.12em;font-size:12px}.journal-hero h1{font-size:clamp(40px,7vw,72px);margin:10px 0}.journal-hero p{max-width:680px;margin:0 auto 28px;font-size:18px;line-height:1.7}.journal-cta{display:inline-flex;gap:10px;align-items:center;padding:14px 22px;border-radius:14px;background:#3f928d;color:#fff;text-decoration:none;font-weight:700}.journal-grid{max-width:1180px;margin:0 auto;padding:60px 24px 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.journal-card{background:#fff;padding:28px;border-radius:22px;box-shadow:0 12px 36px rgba(25,60,55,.08)}.journal-card h2{font-size:22px;line-height:1.35;margin:10px 0}.journal-card>p:not(.journal-label){color:#61706d;line-height:1.7}.journal-card>a{display:inline-block;margin-top:18px;color:#2f7773;font-weight:700;text-decoration:none}.journal-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#e5f5f2;color:#3f928d;font-size:22px;margin-bottom:18px}@media(max-width:850px){.journal-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.journal-grid{grid-template-columns:1fr}.chat-composer{flex-wrap:wrap}.chat-input{flex-basis:calc(100% - 60px)}.meet-greet-request{padding:15px}}

/* ================================================================
   FINAL UI POLISH — PUBLIC DESKTOP NAVBAR
   ================================================================ */
.navbar-left{display:flex;align-items:center;gap:16px}
#navbar .navbar-left a{text-decoration:none}
.public-nav-links{display:none;list-style:none;margin:0;padding:0;align-items:center;gap:4px}
.public-nav-links a{display:inline-block;padding:8px 15px;border-radius:30px;color:#274b49;font-weight:600;font-size:15px;text-decoration:none;transition:background .15s ease,color .15s ease}
.public-nav-links a:hover{background:rgba(63,138,134,.12);color:#1f5f5b}
.public-nav-links a.active{background:#3F8A86;color:#fff}
.navbar-right{display:flex;align-items:center;gap:14px}
.nav-book-cta{display:none;align-items:center;padding:10px 20px;border-radius:30px;background:#3F8A86;color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .15s ease,transform .15s ease}
.nav-book-cta:hover{background:#2f6f6c;transform:translateY(-1px)}
/* ================================================================
   PUBLIC NAVBAR RESPONSIVE BREAKPOINT
   Desktop: above 1200px
   Mobile/sidebar navigation: 1200px and below
   ================================================================ */

@media (min-width: 1201px) {

  /* Desktop navigation */
  .public-nav-links {
    display: flex;
  }

  .nav-book-cta {
    display: inline-flex;
  }

  /* Hide hamburger on desktop */
  #navbar #menu {
    display: none;
  }
}


@media (max-width: 1400px) {

  /* Hide desktop navigation */
  .public-nav-links {
    display: none;
  }

  /* Hide desktop Book Now button */
  .nav-book-cta {
    display: none;
  }

  /* Show hamburger/menu button */
  #navbar #menu {
    display: flex;
  }

  /* Keep navbar clean: logo on left, menu on right */
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 0;
  }

  /* Hide account/bookings/messages/dashboard buttons
     from the right side when using sidebar navigation */
  .navbar-right > a {
    display: none;
  }

  /* But KEEP the hamburger menu */
  .navbar-right #menu {
    display: flex;
  }
}

/* ================================================================
   FINAL UI POLISH — MESSAGING (composer + avatars)
   ================================================================ */
.chat-message-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.message-avatar,
.message-avatar-photo,
img.message-avatar,
.chat-message-head img{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;min-height:32px!important;max-height:32px!important;border-radius:50%!important;object-fit:cover!important;flex-shrink:0!important;display:inline-block!important}
.message-avatar-initial,
span.message-avatar{width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;border-radius:50%!important;background:#fff;color:#2f6f6c;font-weight:700;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
.message-image,
.message-bubble img.message-image{display:block;max-width:100%;width:auto;max-height:280px;height:auto;object-fit:contain;border-radius:10px}
.chat-composer{background:#fff;border:1px solid #dfe9e7;border-radius:16px;padding:8px;box-shadow:0 4px 14px rgba(25,60,55,.06)}
.chat-composer .image-attach-btn{flex:0 0 40px;height:40px;border-radius:11px}
.chat-composer .chat-input{border:none!important;background:transparent;border-radius:10px;padding:11px 12px;box-shadow:none}
.chat-composer .chat-input:focus{outline:2px solid rgba(63,138,134,.4);outline-offset:-2px}
.chat-composer button{border-radius:12px}

.nav-client-link {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 20px;
    background: #eef6f5;
    color: #2f6f6c;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}
.nav-client-link:hover {
    background: #dff0ee;
    color: #1f5f5b;
}
@media(min-width:960px){
    .nav-client-link {
        display: inline-flex;
    }
}

/* ================================================================
   HERO CTAS (genuinely centered desktop & responsive buttons)
   ================================================================ */
.hero-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 22px auto 0 auto;
    width: 100%;
}
.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    background: #3F8A86;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(63, 138, 134, 0.3);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-cta-primary:hover {
    background: #2f6f6c;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(63, 138, 134, 0.35);
}
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    color: #2f6f6c !important;
    font-size: 15.5px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #2f6f6c;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.hero-cta-secondary:hover {
    background: #ffffff;
    color: #235855 !important;
    border-color: #235855;
    transform: translateY(-1px);
}

/* ================================================================
   JOURNAL ARTICLE TYPOGRAPHY
   ================================================================ */
.article-body h2 {
    font-size: 1.45rem;
    color: #17324a;
    margin: 28px 0 12px;
    line-height: 1.35;
    font-weight: 700;
}
.article-body h3 {
    font-size: 1.25rem;
    color: #2f6f6c;
    margin: 24px 0 10px;
    line-height: 1.4;
    font-weight: 700;
}
.article-body h4 {
    font-size: 1.1rem;
    color: #17324a;
    margin: 20px 0 8px;
    line-height: 1.4;
    font-weight: 600;
}
.article-body p {
    margin: 0 0 16px;
    line-height: 1.8;
    color: #333;
}
.article-body ul,
.article-body ol {
    margin: 0 0 20px 24px;
    padding: 0;
    line-height: 1.8;
}
.article-body li {
    margin-bottom: 8px;
    color: #444;
}
.article-body strong {
    color: #17324a;
}

/* ================================================================
   MESSAGING IMAGES SAFETY, CONSTRAINTS & BUBBLE ALIGNMENT
   ================================================================ */
.message-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.message-thread.client-chat {
    max-height: 460px;
    background: #f7f4ec;
    border-radius: 14px;
    padding: 16px;
}
.message-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    word-break: break-word;
    overflow-wrap: break-word;
}
@media (max-width: 768px) {
    .message-bubble {
        max-width: 88%;
    }
}
.message-bubble p {
    margin: 4px 0 6px;
    white-space: pre-wrap;
    color: inherit;
}
/* CLIENT messages: always LEFT */
.message-bubble.client,
.message-bubble.message-client,
.message-bubble.theirs {
    align-self: flex-start;
    background: #eef3f2;
    color: #2b3332;
    border-bottom-left-radius: 4px;
}
/* SITTER messages: always RIGHT */
.message-bubble.sitter,
.message-bubble.message-sitter,
.message-bubble.mine {
    align-self: flex-end;
    background: #3F8A86;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.message-bubble.sitter .message-author,
.message-bubble.message-sitter .message-author,
.message-bubble.sitter .message-time,
.message-bubble.message-sitter .message-time,
.message-bubble.mine .message-author,
.message-bubble.mine .message-time {
    color: rgba(255, 255, 255, 0.85);
}
.message-bubble.client .message-author,
.message-bubble.message-client .message-author,
.message-bubble.theirs .message-author {
    color: #2f6f6c;
}
.message-bubble.client .message-time,
.message-bubble.message-client .message-time,
.message-bubble.theirs .message-time {
    color: #6e7b83;
}
.message-image-link {
    display: block;
    max-width: 100%;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
}
.message-image,
.message-bubble img.message-image {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 280px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

/* ================================================================
   CARE NOTES & MEET & GREET (CLIENT SIDE)
   ================================================================ */
.care-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #d9e8e5;
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
    text-align: left;
}
.care-card h2 {
    font-size: 17px;
    color: #2f6f6c;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.care-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14.5px;
}
.care-clause {
    background: #fbf9f5;
    border: 1px solid #e7ddd0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
}
.care-clause:last-child {
    margin-bottom: 0;
}
.care-clause strong {
    display: block;
    color: #2f6f6c;
    font-size: 13.5px;
    margin-bottom: 4px;
}
.care-clause p {
    margin: 2px 0 0 0;
    color: #333;
    line-height: 1.5;
}
.approval-line {
    margin-top: 8px !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
}
.approval-line.approved {
    background: #e8f7ee;
    color: #1e8e3e;
    border: 1px solid #c2ebd0;
}
.approval-line.not-approved {
    background: #fdf2f0;
    color: #c0392b;
    border: 1px solid #f8c8c2;
}

/* ============================================================
   MOBILE RESPONSIVENESS & BACKGROUND SQUEEZE FIX
   ============================================================ */
@media (max-width: 768px) {
    .auth-page {
        background-image: none !important;
        background-color: #f7faf9 !important;
    }
    .auth-page .account-page {
        padding-top: 20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .account-card,
    .my-bookings-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px 14px !important;
        box-sizing: border-box !important;
    }
    .booking-card {
        padding: 16px 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Ensure circular avatars never become oval on any screen */
.avatar,
.booking-sitter-image-wrapper,
.booking-sitter-image,
.sitter-circular-avatar,
.message-avatar,
.message-avatar-photo {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* ============================================================
   TRUST & SAFETY NOTICE BANNER
   ============================================================ */
.chat-trust-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #eef8f5;
    border: 1px solid #c2ebd0;
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: #23615e;
    line-height: 1.45;
}

.chat-trust-banner .trust-icon {
    font-size: 20px;
    color: #3F8A86;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .chat-trust-banner {
        padding: 10px 14px;
        font-size: 12.5px;
        gap: 10px;
    }
    .chat-trust-banner .trust-icon {
        font-size: 17px;
    }
}

/* ============================================================
   FORM CONTROLS & CARE NOTES INPUTS
   ============================================================ */
.form-input,
textarea.form-input,
input[type="text"].form-input,
input[type="password"].form-input,
input[type="tel"].form-input,
input[type="email"].form-input,
input[type="date"].form-input,
input[type="time"].form-input,
select.form-input {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    color: #222222 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d9e8e5 !important;
    border-radius: 10px !important;
    padding: 11px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    line-height: 1.5 !important;
}

textarea.form-input {
    min-height: 80px;
    resize: vertical;
}

.form-input:focus,
textarea.form-input:focus,
input.form-input:focus,
select.form-input:focus {
    border-color: #3F8A86 !important;
    box-shadow: 0 0 0 3.5px rgba(63, 138, 134, 0.15) !important;
}

.form-input.error {
    border-color: #e53e3e !important;
    background-color: #fff8f8 !important;
}

.checkbox-input,
input[type="checkbox"] {
    accent-color: #3F8A86;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================================
   CHAT & MESSAGING POLISH
   ============================================================ */
.message-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 520px;
    overflow-y: auto;
    padding: 16px 12px;
    background: #fbfbf9;
    border-radius: 14px;
    border: 1px solid #eef2f1;
    margin-bottom: 20px;
}

.message-bubble {
    max-width: 78%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14.5px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.message-bubble.client,
.message-bubble.message-client {
    align-self: flex-end;
    background-color: #3F8A86;
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.message-bubble.client p,
.message-bubble.message-client p {
    color: #ffffff;
}

.message-bubble.client .message-time,
.message-bubble.message-client .message-time {
    color: rgba(255, 255, 255, 0.8);
}

.message-bubble.sitter,
.message-bubble.message-sitter {
    align-self: flex-start;
    background-color: #ffffff;
    color: #2c3e50;
    border: 1px solid #e2ece9;
    border-bottom-left-radius: 4px;
}

.message-bubble.sitter p,
.message-bubble.message-sitter p {
    color: #2c3e50;
}

.message-image {
    max-width: 280px;
    max-height: 280px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin-top: 8px;
    margin-bottom: 6px;
}

.attachment-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1.5px solid #3F8A86;
    border-radius: 10px;
    padding: 6px 12px;
    box-shadow: 0 2px 8px rgba(63, 138, 134, 0.12);
}

.attachment-preview-chip .preview-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
}

.attachment-preview-chip .preview-name {
    font-size: 13px;
    font-weight: 500;
    color: #17324A;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-preview-chip .preview-remove-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #c0392b;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

@media (max-width: 600px) {
    .chat-composer,
    .message-reply-form {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .chat-composer .chat-input,
    .message-reply-form .chat-input {
        width: 100% !important;
    }

    .chat-composer button[type="submit"],
    .message-reply-form button[type="submit"] {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ============================================================
   HERO BUTTONS ALIGNMENT ON HOMEPAGE
   ============================================================ */
.hero-buttons,
.home-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-buttons .optionbtn,
.home-hero-actions .optionbtn {
    min-width: 180px;
    text-align: center;
    margin: 0;
}

/* ============================================================
   AUTHENTICATION & PASSWORD RESET RESPONSIVENESS (320px - 768px)
   ============================================================ */
@media (max-width: 600px) {
    .account-page {
        padding: 24px 12px !important;
        min-height: auto;
    }
    .apply-container {
        padding: 16px 12px !important;
        margin: 20px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .account-card {
        padding: 24px 14px !important;
        border-radius: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .account-card h1 {
        font-size: 1.6rem !important;
    }
    .account-card input,
    .form-input {
        font-size: 14px !important;
        padding: 12px 14px !important;
        box-sizing: border-box;
    }
    .account-btn {
        font-size: 16px !important;
        padding: 12px 16px !important;
    }
    .form-submit {
        font-size: 16px !important;
        padding: 12px 16px !important;
    }
}

@media (max-width: 360px) {
    .account-page {
        padding: 16px 8px !important;
    }
    .apply-container {
        padding: 12px 8px !important;
        margin: 12px auto !important;
    }
    .account-card {
        padding: 18px 10px !important;
        border-radius: 12px !important;
    }
    .account-card h1 {
        font-size: 1.4rem !important;
    }
}

/* ============================================================
   SITTERS PAGE & AVATAR CONSISTENCY ENFORCEMENT
   ============================================================ */
.sitters-intro-text {
    color: #ffffff !important;
    text-align: center;
    font-size: 13.5px;
    margin: 8px auto 20px;
    max-width: 680px;
    line-height: 1.45;
}

.filters-panel.hidden {
    display: none !important;
}

.avatar,
.profile-photo,
.sitter-photo,
.booking-sitter-image,
.message-avatar,
.message-avatar-photo,
.sitter-circular-avatar {
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

.sitter-photo {
    width: 160px !important;
    height: 160px !important;
    max-width: 100% !important;
    margin: 0 auto 12px !important;
    display: block !important;
}

.sitter-profile .profile-photo {
    width: 180px !important;
    height: 180px !important;
    max-width: 100% !important;
    margin: 0 auto 20px !important;
    display: block !important;
}