body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

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

.btn:first-child:active {
  border: 0;
}

/* Framework class collision on admin pages (which load both Bootstrap and a
   compiled Tailwind bundle): Bootstrap's collapsible-component class is
   literally named "collapse" and only toggles `display`, but Tailwind also
   ships a `.collapse { visibility: collapse }` table utility under the same
   name. That rule applies unconditionally and silently keeps any Bootstrap
   collapse/accordion invisible even once it's `.show`n. Restore visibility
   for the shown state; specificity (two classes) wins regardless of load order. */
.collapse.show {
  visibility: visible;
}

.based_location .based_location_2 {
  margin-top: 20px;
}

.navbar-nav .nav-link {
  font-weight: 700;
  font-size: 13px;
  color: black;
}

.navbar-nav .nav-link:hover {
  color: #B08149;
}

.navbar-nav .nav-link.active {
  color: #B08149;
}

/* .navbar-brand img { height: 50px; } */
.navbar {
  background-color: white;
}

/* Brand-consistent fallback for native admin form controls that don't already
   have a dedicated component class (e.g. .login-input) — those keep winning
   via CSS specificity, this only fills in otherwise-unstyled fields. */
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="tel"],
main input[type="date"],
main input[type="url"],
main input[type="search"],
main select,
main textarea {
  border: 1px solid #ded8cf;
  border-radius: 0.6rem;
  padding: 0.55rem 0.85rem;
  background: #fbfaf7;
  color: #242321;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

main input[type="text"]:focus,
main input[type="email"]:focus,
main input[type="password"]:focus,
main input[type="number"]:focus,
main input[type="tel"]:focus,
main input[type="date"]:focus,
main input[type="url"]:focus,
main input[type="search"]:focus,
main select:focus,
main textarea:focus {
  outline: 0;
  border-color: #b08149;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(176, 129, 73, 0.12);
}

/* Preserve validation-error borders (Tailwind's bare .border-red-500 utility,
   or Bootstrap's .is-invalid) against the fallback above. */
main input.border-red-500,
main select.border-red-500,
main textarea.border-red-500,
main .is-invalid {
  border-color: #b13a3a !important;
}

main label {
  color: #3a3733;
  font-weight: 620;
}

.form-control:focus,
.only-border-color:focus,
textarea:focus {
  border: solid 1px #B08149 !important;
}

.nav .admin-header-menu:hover,
.nav .admin-header-menu:focus {
  color: #B08149 !important;
}

.dropdown-menu .dropdown-item {
  color: black;
  font-weight: 500;
}

.card1 {
  background-color: #B08149;
  color: white;
}

/* Shared primary action button across the whole admin panel (links + submit buttons) */
.only-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid #a8733b;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, #b98549 0%, #976435 100%);
  color: #ffffff;
  font-weight: 620;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(141, 99, 52, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.only-color:hover,
.only-color:focus-visible {
  background: #242321;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(36, 35, 33, 0.18);
}

.cardsection {
  background-color: black;
  color: white;
}

.card-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.card-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-image-wrapper img.hover-img {
  opacity: 0;
}

.card-image-wrapper:hover img.hover-img {
  opacity: 1;
}

.card-image-wrapper:hover img.default-img {
  opacity: 0;
}

.testimonalis {
  background-color: white;
  color: black;
  padding-top: 50px;
}

/* Shared compact public-site footer */
.site-footer {
  background: #0b0b0b;
  border-top: 1px solid rgba(176, 129, 73, 0.32);
  color: rgba(255, 255, 255, 0.72);
  padding: 28px 0 20px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer__primary,
.site-footer__stores,
.site-footer__utilities,
.site-footer__policy-links,
.site-footer__socials,
.site-footer__legal {
  align-items: center;
  display: flex;
}

.site-footer__primary {
  justify-content: space-between;
  gap: 28px;
}

.site-footer__stores {
  flex-wrap: wrap;
  gap: 10px;
}

.site-footer__store-link {
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: inline-flex;
  gap: 9px;
  min-height: 46px;
  min-width: 154px;
  padding: 7px 13px;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.site-footer__store-link:hover,
.site-footer__store-link:focus-visible {
  background: rgba(176, 129, 73, 0.14);
  border-color: rgba(176, 129, 73, 0.75);
  color: #fff;
  transform: translateY(-1px);
}

.site-footer__store-link i {
  color: #c69a62;
  font-size: 1.35rem;
  line-height: 1;
}

.site-footer__store-link span {
  display: grid;
  line-height: 1.05;
}

.site-footer__store-link small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.site-footer__store-link strong {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
}

.site-footer__utilities {
  align-items: flex-end;
  flex-direction: column;
  gap: 12px;
}

.site-footer__policy-links {
  gap: 10px;
}

.site-footer__policy-links a,
.site-footer__socials a,
.site-footer__legal a,
.site-footer__legal p {
  font-size: 0.78rem;
  margin: 0;
}

.site-footer__policy-links a,
.site-footer__legal a {
  transition: color 180ms ease;
}

.site-footer__policy-links a:hover,
.site-footer__policy-links a:focus-visible,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #c69a62;
}

.site-footer__policy-links span {
  color: rgba(255, 255, 255, 0.25);
}

.site-footer__socials {
  gap: 16px;
}

.site-footer__socials a {
  align-items: center;
  display: inline-flex;
  gap: 6px;
  transition: color 180ms ease, transform 180ms ease;
}

.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
  color: #c69a62;
  transform: translateY(-1px);
}

.site-footer__socials i {
  font-size: 0.95rem;
}

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding-top: 16px;
}

.site-footer__legal p {
  color: rgba(255, 255, 255, 0.52);
}

.site-footer__legal a {
  color: rgba(255, 255, 255, 0.52);
}

/* Shared property navigation menu */
.properties-menu {
  display: flex;
  align-items: center;
}

.properties-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1.2;
  white-space: nowrap;
}

.properties-menu__trigger::after {
  display: none !important;
}

.properties-menu__chevron {
  width: 9px;
  height: 6px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transition: transform 180ms ease;
}

.properties-menu__trigger[aria-expanded="true"] .properties-menu__chevron {
  transform: rotate(180deg);
}

.properties-menu__dropdown {
  min-width: 210px;
  margin-top: 0.55rem !important;
  padding: 0.45rem;
  border: 1px solid rgba(36, 35, 33, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(36, 35, 33, 0.14);
}

/* Collapsed navbar (below navbar-expand-md).
   Bootstrap switches .dropdown-menu to position: static inside the collapsed
   panel. That puts the <ul> back in normal flow, where .properties-menu's
   display:flex treats it as a second flex item and lays it out BESIDE the
   trigger — a 210px panel shoved to the right instead of a list underneath.
   Below the breakpoint the row has to stop being a row. */
@media (max-width: 767.98px) {
  .properties-menu {
    display: block;
  }

  .properties-menu__dropdown {
    /* The 210px desktop minimum is what kept it narrow and off to one side. */
    min-width: 0;
    width: 100%;
    margin-top: 0.35rem !important;
    /* Inside the panel this is a sub-list, not a floating menu, so the
       floating-card treatment is dropped. */
    border: 0;
    box-shadow: none;
    background: rgba(36, 35, 33, 0.035);
    padding: 0.3rem;
  }

  .properties-menu__item {
    padding: 0.7rem 0.85rem;
  }
}

.properties-menu__item {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  padding: 0.66rem 0.75rem;
  border-radius: 9px;
  color: #35322f;
  font-size: 0.86rem;
  font-weight: 550;
  transition: background-color 160ms ease, color 160ms ease;
}

.properties-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border-radius: 0.45rem;
  background: rgba(176, 129, 73, 0.1);
  color: #a8733b;
  font-size: 0.8rem;
  line-height: 1;
  transition: background-color 160ms ease, color 160ms ease;
}

.properties-menu__item:hover,
.properties-menu__item:focus-visible,
.properties-menu__item.active {
  background: rgba(176, 129, 73, 0.1);
  color: #704a27;
}

.properties-menu__item:hover .properties-menu__icon,
.properties-menu__item:focus-visible .properties-menu__icon,
.properties-menu__item.active .properties-menu__icon {
  background: #b08149;
  color: #ffffff;
}

/* Shared signed-in account menu */
.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1.2;
  white-space: nowrap;
}

.account-menu__trigger::after {
  display: none !important;
}

.account-menu__avatar {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(176, 129, 73, 0.3);
  border-radius: 50%;
  background: rgba(176, 129, 73, 0.09);
  color: #895129;
  font-size: 0.95rem;
  line-height: 1;
}

.account-menu__name {
  display: inline-block;
  max-width: 140px;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__chevron {
  color: #7c746b;
  font-size: 0.68rem;
  transition: transform 180ms ease;
}

.account-menu__trigger[aria-expanded="true"] .account-menu__chevron {
  transform: rotate(180deg);
}

.account-menu__dropdown {
  min-width: 190px;
  margin-top: 0.55rem !important;
  padding: 0.45rem;
  border: 1px solid rgba(36, 35, 33, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(36, 35, 33, 0.14);
}

.account-menu__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.66rem 0.75rem;
  border: 0;
  border-radius: 9px;
  color: #35322f;
  font-size: 0.86rem;
  font-weight: 550;
  transition: background-color 160ms ease, color 160ms ease;
}

.account-menu__item i {
  width: 18px;
  color: #9a6b38;
  font-size: 0.96rem;
  text-align: center;
}

.account-menu__settings {
  cursor: default;
}

.account-menu__item:hover,
.account-menu__item:focus-visible {
  background: rgba(176, 129, 73, 0.1);
  color: #242321;
}

.account-menu__divider {
  margin: 0.35rem 0;
  border-color: rgba(36, 35, 33, 0.1);
}

.account-menu__logout:hover,
.account-menu__logout:focus-visible {
  background: rgba(157, 54, 54, 0.08);
  color: #8d3030;
}

.account-menu__logout:hover i,
.account-menu__logout:focus-visible i {
  color: #8d3030;
}

@media (min-width: 768px) {
  .navbar-nav {
    align-items: center;
  }

  .account-menu {
    display: flex;
    align-items: center;
  }
}

.site-whatsapp-float {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(30, 190, 95, 0.2);
  border-radius: 50%;
  bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  color: #1ebe5f;
  display: inline-flex;
  font-size: 1.55rem;
  height: 52px;
  justify-content: center;
  position: fixed;
  right: 24px;
  transition: box-shadow 180ms ease, transform 180ms ease;
  width: 52px;
  z-index: 9999;
}

.site-whatsapp-float:hover,
.site-whatsapp-float:focus-visible {
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.2);
  color: #159447;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .site-footer {
    padding: 24px 0 18px;
  }

  .site-footer__primary,
  .site-footer__legal {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer__primary {
    gap: 22px;
  }

  .site-footer__utilities {
    align-items: flex-start;
  }

  .site-footer__legal {
    gap: 7px;
  }

  .site-footer__socials span {
    display: none;
  }

  .site-footer__socials a {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    height: 34px;
    justify-content: center;
    width: 34px;
  }

  .site-whatsapp-float {
    bottom: 16px;
    height: 48px;
    right: 16px;
    width: 48px;
  }
}

@media (max-width: 380px) {
  .site-footer__stores {
    width: 100%;
  }

  .site-footer__store-link {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-whatsapp-float {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  padding: 0;
  margin: 0;
  justify-content: start !important;
}

.screen_all_box .card img {
  width: 100%;
  height: 100%;
}

.blogimg:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.btn-icon {
  font-size: 24px;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
}

#screen1 {
  display: block;
}

#screen2 {
  display: none;
}

.screen {
  padding: 20px;
}

.toggle-icons {
  /* display: flex; */
  gap: 10px;
  /* margin: 20px; */
  /* float: right; */
}

.propery {
  background: url('/storage/images/banner1.png');
  color: white;
  background-size: cover;
  padding-top: 90px;
  padding-bottom: 90px;
}

/* --- Responsive Media Queries --- */
/* Small Devices: 320px to 480px */
@media (max-width: 480px) {
  h1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }

}

/* Medium Devices: 481px to 768px */
@media (min-width: 481px) and (max-width: 768px) {
  h1 {
    font-size: 2.8rem;
  }

}

/* carousel */
.testimonial-card {
  background-color: aliceblue;
  padding: 30px 20px;
  height: 100%;
}

.testimonial-carousel .carousel-inner {
  display: flex;
}

.testimonial-carousel .carousel-item {
  flex: 0 0 100%;
  transition: transform 0.6s ease;
}



.testimonial-stars i {
  color: #000042;
}

.contact-info-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 40px 0;
  flex-wrap: wrap;
}

.contact-info-card {
  background: #ffffff;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
  box-sizing: border-box;
}

.contact-info-card .icon {
  background-color: #B08149;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

.contact-info-card .icon img {
  width: 35px;
  height: 35px;
}

.contact-info-card h4 {
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.contact-info-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
  word-break: break-word;
}


/* hover */
.image-hover-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 600px;
}

.image-hover-container img {
  width: 100%;
  display: block;
}

.second-image {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: top 0.5s ease-in-out;
  object-fit: cover;
}

.herosection h1 {
  font-size: 50px;
  font-weight: 700;
  color: black;
}

.hero-message {
  margin-bottom: 0.85rem;
}

.hero-message__titles,
.hero-message__supports {
  position: relative;
  display: block;
  margin: 0;
}

.hero-message__supports {
  margin-top: 0.55rem;
}

.hero-message__title,
.hero-message__support {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.75s;
}

.hero-message__title.is-active,
.hero-message__support.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.hero-message__title.is-leaving,
.hero-message__support.is-leaving {
  transform: translateY(-10px);
}

.hero-message__title {
  display: block;
  line-height: 1.2;
}

.hero-message__support {
  margin: 0;
  max-width: 620px;
  color: #242424;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.6;
}

.hero-message__progress {
  display: block;
  width: 72px;
  height: 3px;
  margin: 0.75rem 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(176, 129, 73, 0.2);
}

.hero-message__progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #b08149, #d4af37);
  transform: scaleX(0);
  transform-origin: left;
}

.hero-message__progress-fill.is-running {
  animation: hero-message-progress 4.2s linear forwards;
}

@keyframes hero-message-progress {
  to {
    transform: scaleX(1);
  }
}

.hero-description {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  max-width: 680px;
  margin: 0;
  color: #242424;
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.75s;
}

.hero-descriptions {
  position: relative;
  display: block;
  margin: 0 0 1.35rem;
}

.hero-description.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.hero-description.is-leaving {
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  .hero-message__title,
  .hero-message__support,
  .hero-description {
    transition: none;
  }

  .hero-message__progress {
    display: none;
  }
}

@media (max-width: 991px) {
  .hero-message__progress {
    margin-right: auto;
    margin-left: auto;
  }
}

.cardsection .based_your_loacation {
  font-weight: 700;
  font-size: 60px;
}

.cardsection .see_all {
  float: right;
  font-weight: 700;
}

.cardsection .all_property_titel {
  float: left;
  font-weight: 700;
}

.testimonalis .testimonalis_title {
  font-size: 52px;
  font-weight: 700;
}

.image-hover-container:hover .second-image {
  top: 0;
}
/* Same treatment as the login/contact/home/property submit buttons, for site-wide button consistency */
.favrite-view-button {
  border: 1px solid #a8733b;
  background: linear-gradient(135deg, #b98549 0%, #976435 100%);
  color: white;
  text-align: center;
  box-shadow: 0 9px 20px rgba(141, 99, 52, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.favrite-view-button:hover {
  background: #242321;
  color: white;
  box-shadow: 0 14px 28px rgba(36, 35, 33, 0.16);
  transform: translateY(-2px);
}

@media (min-width: 426px) and (max-width: 768px) {

  .herosection h1,
  .cardsection .based_your_loacation,
  .check_out_homerenters .check_out_homerenters_title,
  .latest_updates .latest_updates_title,
  .testimonalis .testimonalis_title,
  .display-4 {
    font-size: 34px;
  }

  .based_location .based_location_2 {
    margin-top: 0;
  }

  .check_out_homerenters .img-fluid {
    width: 134px !important;
  }

}

@media (max-width: 768px) {
  .display-3 {
    font-size: 30px;
  }
}
/* --- Base Testimonial Styles --- */

.testimonial-columns {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.testimonial-card-wrapper {
  flex: 0 0 calc(33.33% - 20px);
  max-width: calc(33.33% - 20px);
}

.testimonial-card {
  height: 100%;
  width: 100%;
}

@media (max-width: 767px) {
  .testimonial-carousel .carousel-inner {
      padding: 0 5px; 
  }

  .testimonial-columns {
      flex-wrap: nowrap; 
      justify-content: flex-start; 
      gap: 0; 
      padding: 0; 
      margin: 0;
  }

  .testimonial-card-wrapper {
      flex: 0 0 100%; 
      max-width: 100%;
      padding: 0 15px;
  }

  .testimonial-card {
      width: 100%; 
      margin: 0;
      padding: 20px; 
  }

  .carousel-control-prev,
  .carousel-control-next {
      width: 15%;
      background-color: transparent;
  }
}
@media (min-width: 768px) and (max-width: 820px) {
  .property-card .card-title{
		font-size:20px;
  }
  .filter_properties_form .filter_properties_title{
    font-size: 18px;
  }
}
@media (min-width: 800px) and (max-width: 1025px) {
  .herosection h1 , .cardsection .based_your_loacation , .display-3, .display-4 ,.testimonalis .testimonalis_title{
    font-size: 40px;
  }
}
@media (min-width: 320px) and (max-width: 425px) {
  .hero-message__support {
    font-size: 1.1rem;
  }

  .cardsection .all_property_titel, .cardsection .see_all , .card-body .card-title ,.featured_title{
    font-size: 15px;
  }
  .testimonalis .testimonalis_title , .herosection h1 , .cardsection .based_your_loacation , .display-3 , .display-4 {
	font-size:25px;	
  }
  .property-card .card-title{
    font-size:20px;
  }
}

/* ============================================================
   Admin Panel Design System
   Shared, brand-consistent (gold #b08149 / charcoal #242321)
   building blocks reused across every admin section.
   ============================================================ */

.admin-page-card {
    background: #ffffff;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 1rem;
    box-shadow: 0 10px 28px rgba(43, 36, 28, 0.05);
    padding: 1.75rem;
}

.admin-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.admin-page-header h1,
.admin-page-header h2,
.admin-page-header h3 {
    margin: 0;
    color: #242321;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.admin-page-subtitle {
    margin: 0.3rem 0 0;
    color: #6c6a67;
    font-size: 0.85rem;
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* --- Tabs (e.g. Users / Org Chart on User Management) --- */
.admin-tabs {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.08);
}

.admin-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 0.25rem;
    margin-bottom: -1px;
    font-size: 0.87rem;
    font-weight: 600;
    color: #6c6a67;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.admin-tab-btn + .admin-tab-btn {
    margin-left: 1.1rem;
}

.admin-tab-btn:hover {
    color: #8d6334;
}

.admin-tab-btn.active {
    color: #8d6334;
    border-bottom-color: #b08149;
}

/* --- Org Chart ---
   Classic table-based CSS tree: ul/li rendered as a table so sibling widths
   share space naturally, with :before/:after pseudo-elements drawing the
   connector lines (a vertical drop from the parent, a horizontal bar spanning
   siblings, trimmed at the first/last child so it doesn't overshoot). */
.org-chart-card {
    padding: 0;
    overflow: hidden;
}

.org-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem 0.95rem;
}

.org-chart-toolbar__title {
    margin: 0;
    color: #242321;
    font-size: 1rem;
    font-weight: 700;
}

.org-chart-toolbar__subtitle {
    margin: 0.2rem 0 0;
    color: #85817a;
    font-size: 0.8rem;
}

.org-chart-scroll-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(176, 129, 73, 0.1);
    color: #8d6334;
    font-size: 0.73rem;
    font-weight: 650;
}

.org-chart-viewport {
    position: relative;
    width: 100%;
    min-height: 420px;
    max-height: min(68vh, 720px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    border-top: 1px solid rgba(36, 35, 33, 0.07);
    background-color: #fbfaf8;
    background-image: radial-gradient(rgba(176, 129, 73, 0.13) 0.8px, transparent 0.8px);
    background-size: 18px 18px;
    outline: none;
}

.org-chart-viewport:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(176, 129, 73, 0.45);
}

.org-chart-viewport::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.org-chart-viewport::-webkit-scrollbar-track {
    background: #f0ece6;
}

.org-chart-viewport::-webkit-scrollbar-thumb {
    border: 3px solid #f0ece6;
    border-radius: 999px;
    background: #b8aa98;
}

.org-chart-viewport::-webkit-scrollbar-thumb:hover {
    background: #9d876c;
}

.org-chart {
    width: max-content;
    min-width: 100%;
    padding: 2rem 2.25rem 3rem;
}

.org-chart ul,
.org-chart li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.org-chart ul {
    display: table;
    margin: 0 auto;
}

.org-chart ul {
    width: 100%;
}

.org-chart li {
    display: table-cell;
    text-align: center;
    padding: 2.2rem 0.9rem 0;
    vertical-align: top;
}

.org-chart > ul {
    padding-top: 0;
    width: max-content;
    min-width: 100%;
}

.org-chart > ul > li {
    padding-top: 0;
}

.org-chart__root-users {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Horizontal bar above each row of siblings, spanning the full row... */
.org-chart li li::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    left: 50%;
    border-top: 1px solid rgba(176, 129, 73, 0.4);
}

/* ...trimmed so it starts/ends at the outermost children, not the row edge */
.org-chart li li:first-child::before { left: 50%; }
.org-chart li li:last-child::before { right: 50%; }
.org-chart li:only-child::before { display: none; }

/* Vertical drop from the parent node into this row of children */
.org-chart ul ul::before {
    content: "";
    position: absolute;
    top: -2.2rem;
    left: 50%;
    border-left: 1px solid rgba(176, 129, 73, 0.4);
    height: 2.2rem;
}

/* Vertical stub connecting each child up to the horizontal bar above it */
.org-chart li li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid rgba(176, 129, 73, 0.4);
    height: 2.2rem;
}

.org-node {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 188px;
    min-height: 58px;
    background: #fff;
    border: 1px solid rgba(36, 35, 33, 0.1);
    border-radius: 0.75rem;
    padding: 0.65rem 0.85rem;
    box-shadow: 0 4px 12px rgba(36, 35, 33, 0.055);
    text-align: left;
    cursor: default;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.org-node:hover {
    box-shadow: 0 6px 18px rgba(36, 35, 33, 0.14);
    transform: translateY(-1px);
}

.org-node__avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(36, 35, 33, 0.06);
    color: #6c6a67;
    font-size: 0.72rem;
    font-weight: 700;
}

.org-node__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-node__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.org-node__role {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b08149;
}

.org-node__name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #242321;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 165px;
}

/* Elevated "top of hierarchy" treatment — solid gradient fill, white text,
   avatar rendered as a translucent circle so it reads against the fill. */
.org-node--superadmin,
.org-node--global-admin {
    border: none;
}

.org-node--superadmin .org-node__role,
.org-node--superadmin .org-node__name,
.org-node--global-admin .org-node__role,
.org-node--global-admin .org-node__name {
    color: #fff;
}

.org-node--superadmin .org-node__role,
.org-node--global-admin .org-node__role {
    color: rgba(255, 255, 255, 0.78);
}

.org-node--superadmin .org-node__avatar,
.org-node--global-admin .org-node__avatar {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.org-node--superadmin {
    background: linear-gradient(135deg, #c99a52 0%, #a8752e 100%);
}

.org-node--global-admin {
    background: linear-gradient(135deg, #3f74c2 0%, #1f5aa8 100%);
}

/* Tinted "scoped" roles — a colored left rail + wash identifies the role at
   a glance; swatches in the legend use the same hues. */
.org-node--city-manager,
.org-node--area-manager,
.org-node--agent {
    border-left-width: 3px;
}

.org-node--city-manager {
    background: rgba(31, 138, 76, 0.07);
    border-color: rgba(31, 138, 76, 0.3);
    border-left-color: #1f8a4c;
}

.org-node--city-manager .org-node__role { color: #1f8a4c; }

.org-node--area-manager {
    background: rgba(122, 63, 174, 0.07);
    border-color: rgba(122, 63, 174, 0.3);
    border-left-color: #7a3fae;
}

.org-node--area-manager .org-node__role { color: #7a3fae; }

.org-node--agent {
    background: rgba(193, 80, 31, 0.07);
    border-color: rgba(193, 80, 31, 0.3);
    border-left-color: #c1501f;
}

.org-node--agent .org-node__role { color: #c1501f; }

/* City — a place, not a person: dashed outline, no color identity of its
   own, muted icon in place of a photo/initials avatar. */
.org-node--city {
    background: rgba(36, 35, 33, 0.03);
    border-style: dashed;
}

.org-node--city .org-node__role {
    color: #6c6a67;
}

.org-node--city .org-node__avatar {
    background: transparent;
    border: 1px dashed rgba(36, 35, 33, 0.25);
    color: #8a857e;
    font-size: 0.85rem;
}

/* --- Org Chart legend --- */
.org-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    align-items: center;
    padding: 0.7rem 1.35rem;
    margin: 0;
    border-top: 1px solid rgba(36, 35, 33, 0.06);
    background: #fff;
}

.org-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #52514e;
}

.org-legend__swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.org-legend__swatch--superadmin { background: #a8752e; }
.org-legend__swatch--global-admin { background: #1f5aa8; }
.org-legend__swatch--city-manager { background: #1f8a4c; }
.org-legend__swatch--area-manager { background: #7a3fae; }
.org-legend__swatch--agent { background: #c1501f; }
.org-legend__swatch--city {
    background: transparent;
    border: 1.5px dashed #8a857e;
}

/* --- Org Chart hover tooltip: one shared element, positioned via JS so it
   is never clipped by the chart's horizontally-scrolling container. --- */
.org-tooltip {
    position: fixed;
    z-index: 60;
    max-width: 250px;
    background: #242321;
    color: #fff;
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.55;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease;
}

.org-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.org-tooltip__name {
    display: block;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.05rem;
}

.org-tooltip__role {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.4rem;
}

.org-tooltip__row {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    color: rgba(255, 255, 255, 0.92);
}

.org-tooltip__row + .org-tooltip__row {
    margin-top: 0.25rem;
}

.org-tooltip__row i {
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.15rem;
    font-size: 0.75rem;
}

@media (max-width: 767px) {
    .org-chart-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .org-chart-viewport {
        min-height: 380px;
        max-height: 62vh;
    }

    .org-chart {
        padding: 1.5rem 1.25rem 2.5rem;
    }
}

/* --- Buttons --- */
.admin-btn-primary,
.admin-btn-secondary,
.admin-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.65rem;
    padding: 0.6rem 1.15rem;
    font-size: 0.85rem;
    font-weight: 620;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height: 1.2;
}

.admin-btn-primary {
    border: 1px solid #a8733b;
    background: linear-gradient(135deg, #b98549 0%, #976435 100%);
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(141, 99, 52, 0.16);
}

.admin-btn-primary:hover,
.admin-btn-primary:focus-visible {
    background: #242321;
    border-color: #242321;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(36, 35, 33, 0.18);
}

.admin-btn-secondary {
    border: 1px solid rgba(36, 35, 33, 0.14);
    background: #ffffff;
    color: #242321 !important;
}

.admin-btn-secondary:hover,
.admin-btn-secondary:focus-visible {
    background: rgba(176, 129, 73, 0.08);
    border-color: rgba(176, 129, 73, 0.4);
    color: #8d6334 !important;
}

.admin-btn-danger {
    border: 1px solid rgba(177, 58, 58, 0.25);
    background: rgba(177, 58, 58, 0.06);
    color: #963535 !important;
}

.admin-btn-danger:hover,
.admin-btn-danger:focus-visible {
    background: #963535;
    border-color: #963535;
    color: #ffffff !important;
}

.admin-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 0.55rem;
    border: 1px solid rgba(36, 35, 33, 0.12);
    background: #ffffff;
    color: #6c6a67;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.admin-btn-icon:hover,
.admin-btn-icon:focus-visible {
    background: rgba(176, 129, 73, 0.1);
    color: #8d6334;
    border-color: rgba(176, 129, 73, 0.35);
}

.admin-btn-icon--danger:hover,
.admin-btn-icon--danger:focus-visible {
    background: rgba(177, 58, 58, 0.08);
    color: #963535;
    border-color: rgba(177, 58, 58, 0.3);
}

/* --- Tables --- */
.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 0.9rem;
}

table.admin-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.admin-table thead th {
    background: #faf7f2;
    color: #8a7a63;
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-align: left;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.08);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.06);
    color: #3a3733;
    vertical-align: middle;
}

.admin-table tbody tr {
    transition: background-color 0.15s ease;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: rgba(176, 129, 73, 0.035);
}

.admin-table .admin-empty-row td {
    text-align: center;
    color: #8a857e;
    padding: 2.75rem 1rem;
    font-size: 0.9rem;
}

/* --- Badges / status pills --- */
.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.admin-badge--gold { background: rgba(176, 129, 73, 0.12); color: #8d6334; }
.admin-badge--green { background: rgba(46, 125, 78, 0.1); color: #286a45; }
.admin-badge--red { background: rgba(177, 58, 58, 0.1); color: #963535; }
.admin-badge--gray { background: rgba(108, 106, 103, 0.12); color: #6c6a67; }
.admin-badge--blue { background: rgba(59, 100, 150, 0.1); color: #2f5b85; }

/* --- Forms --- */
.admin-form-group {
    margin-bottom: 1.15rem;
}

.admin-form-label {
    display: block;
    margin-bottom: 0.4rem;
    color: #3a3733;
    font-size: 0.85rem;
    font-weight: 620;
}

.admin-form-control,
select.admin-form-control,
textarea.admin-form-control {
    display: block;
    width: 100%;
    border: 1px solid #ded8cf;
    border-radius: 0.65rem;
    padding: 0.65rem 0.9rem;
    background: #fbfaf7;
    color: #242321;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-form-control:focus {
    outline: 0;
    border-color: #b08149;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(176, 129, 73, 0.12);
}

.admin-form-control.is-invalid {
    border-color: #b13a3a;
}

.admin-form-error {
    margin: 0.4rem 0 0;
    color: #a33a3a;
    font-size: 0.8rem;
}

.admin-form-hint {
    margin: 0.35rem 0 0;
    color: #8a857e;
    font-size: 0.78rem;
}

/* --- Empty state --- */
.admin-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #8a857e;
}

.admin-empty-state i {
    display: block;
    margin-bottom: 0.75rem;
    color: #d7b783;
    font-size: 2.3rem;
}

.admin-empty-state p {
    margin: 0;
    font-size: 0.92rem;
}

/* --- Section divider heading (used inside forms/detail pages) --- */
.admin-section-title {
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.08);
    color: #242321;
    font-size: 1rem;
    font-weight: 700;
}

.admin-section-title:first-child {
    margin-top: 0;
}

/* --- Info grid (used on "show" / detail pages) --- */
.admin-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 2rem;
}

@media (max-width: 767px) {
    .admin-info-grid {
        grid-template-columns: 1fr;
    }
}

.admin-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.06);
}

.admin-info-label {
    color: #8a7a63;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-info-value {
    color: #242321;
    font-size: 0.94rem;
}

.admin-media-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0.7rem;
    border: 1px solid rgba(36, 35, 33, 0.08);
}

/* --- Checkbox / toggle grid (e.g. field-visibility settings) --- */
.admin-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.admin-check-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(36, 35, 33, 0.09);
    border-radius: 0.65rem;
    background: #fbfaf7;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.admin-check-item:hover {
    border-color: rgba(176, 129, 73, 0.4);
    background: rgba(176, 129, 73, 0.05);
}

.admin-check-item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #b08149;
    flex-shrink: 0;
}

.admin-check-item label {
    margin: 0;
    color: #3a3733;
    font-size: 0.86rem;
    font-weight: 550;
    text-transform: capitalize;
    cursor: pointer;
}

/* --- Searchable single-select combobox (e.g. Reporting Manager) --- */
.admin-searchable-select {
    position: relative;
}

.admin-searchable-select__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #ded8cf;
    border-radius: 0.65rem;
    box-shadow: 0 10px 28px rgba(36, 35, 33, 0.14);
    padding: 0.35rem;
}

.admin-searchable-select__option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.admin-searchable-select__option:hover,
.admin-searchable-select__option.is-active {
    background: rgba(176, 129, 73, 0.1);
}

.admin-searchable-select__option-name {
    color: #242321;
    font-size: 0.87rem;
    font-weight: 600;
}

.admin-searchable-select__option-role {
    color: #8a857e;
    font-size: 0.75rem;
}

.admin-searchable-select__option--clear .admin-searchable-select__option-name {
    color: #8a857e;
    font-weight: 500;
    font-style: italic;
}

.admin-searchable-select__empty {
    padding: 0.6rem 0.65rem;
    color: #8a857e;
    font-size: 0.83rem;
}

/* --- Searchable multi-select (tag/chip picker, e.g. Areas) --- */
.admin-searchable-select--multi {
    border: 1px solid #ded8cf;
    border-radius: 0.65rem;
    background: #fbfaf7;
    padding: 0.5rem;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-searchable-select--multi:focus-within {
    border-color: #b08149;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(176, 129, 73, 0.12);
}

.admin-searchable-select--multi > input {
    border: none;
    background: transparent;
    padding: 0.25rem 0.4rem;
}

.admin-searchable-select--multi > input:focus {
    outline: 0;
    box-shadow: none;
}

.admin-searchable-select__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-searchable-select__tags:not(:empty) {
    margin-bottom: 0.4rem;
}

.admin-searchable-select__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.4rem 0.3rem 0.7rem;
    background: rgba(176, 129, 73, 0.12);
    color: #8d6334;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
}

.admin-searchable-select__tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    border-radius: 50%;
    background: rgba(141, 99, 52, 0.18);
    color: #8d6334;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.admin-searchable-select__tag-remove:hover {
    background: rgba(141, 99, 52, 0.32);
}

/* ------------------------------------------------------------------ */
/* Property create/edit form: sectioned layout                         */
/* ------------------------------------------------------------------ */
.admin-form-section {
    background: #ffffff;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 22px rgba(43, 36, 28, 0.045);
}

.admin-form-section__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(36, 35, 33, 0.07);
}

.admin-form-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, #b98549 0%, #8d6334 100%);
    color: #ffffff;
    font-size: 1.05rem;
}

.admin-form-section__title {
    margin: 0;
    color: #242321;
    font-size: 1.02rem;
    font-weight: 700;
}

.admin-form-section__subtitle {
    margin: 0.15rem 0 0;
    color: #85817a;
    font-size: 0.82rem;
}

.admin-btn-toggle {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-btn-toggle.is-active {
    border-color: rgba(176, 129, 73, 0.5);
    background: rgba(176, 129, 73, 0.1);
    color: #8d6334 !important;
}

/* Segmented Upload / URL switch, e.g. for the Property Video field */
.admin-segmented {
    display: inline-flex;
    gap: 0.25rem;
    margin-bottom: 0.85rem;
    padding: 0.25rem;
    border-radius: 0.65rem;
    background: #f6f2ed;
}

.admin-segmented__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #6f6860;
    font-size: 0.84rem;
    font-weight: 650;
    transition: 0.18s ease;
}

.admin-segmented__btn:hover {
    color: #8f6333;
}

.admin-segmented__btn.is-active {
    background: #ffffff;
    color: #8f6333;
    box-shadow: 0 4px 14px rgba(43, 36, 28, 0.08);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.35rem 1.5rem;
}

.admin-form-field--wide {
    grid-column: 1 / -1;
}

.admin-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.admin-form-label-row .admin-form-label {
    margin-bottom: 0;
}

/* "Show on site" visibility toggle paired with a field label — controls
   the setting_property JSON that gates whether a field renders on the
   public-facing pages, independent of whether the field itself is filled in. */
.admin-field-visibility {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    color: #a19c92;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s ease;
}

.admin-field-visibility:hover {
    color: #b08149;
}

.admin-field-visibility input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: #b08149;
    cursor: pointer;
}

/* A field that's always mandatory + shown on site — the checkbox is
   locked on rather than a real user choice, so it reads visually distinct
   from the interactive toggles instead of looking like an unused control. */
.admin-field-visibility--locked {
    cursor: default;
    color: #b08149;
}

.admin-field-visibility--locked input[type="checkbox"] {
    cursor: default;
    opacity: 0.85;
}

.admin-form-hint {
    margin: 0.4rem 0 0;
    color: #a19c92;
    font-size: 0.76rem;
}

/* File inputs, restyled to match the brand instead of the bare browser control */
.admin-form-control[type="file"] {
    padding: 0.45rem 0.6rem;
    cursor: pointer;
}

.admin-form-control[type="file"]::file-selector-button {
    margin-right: 0.85rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, #b98549 0%, #8d6334 100%);
    color: #ffffff;
    font-weight: 620;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.admin-form-control[type="file"]::file-selector-button:hover {
    background: #242321;
}

.admin-file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.85rem;
}

.admin-file-preview:empty {
    display: none;
}

.admin-file-preview__thumb {
    position: relative;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px solid rgba(36, 35, 33, 0.1);
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #f3eee6 0%, #e7ded0 100%);
}

.admin-file-preview__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-file-preview__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(176, 129, 73, 0.25);
    border-radius: 0.55rem;
    background: rgba(176, 129, 73, 0.06);
    color: #6c6a67;
    font-size: 0.8rem;
}

.admin-file-preview__chip i {
    color: #b08149;
}

/* Dynamic BHK planning rows */
.admin-bhk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.admin-bhk-row .admin-form-control {
    flex: 1 1 160px;
}

.admin-bhk-row__actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.admin-bhk-row__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid rgba(36, 35, 33, 0.12);
    border-radius: 0.5rem;
    background: #ffffff;
    color: #6c6a67;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.admin-bhk-row__btn--add:hover {
    background: rgba(46, 158, 91, 0.1);
    border-color: rgba(46, 158, 91, 0.35);
    color: #2e9e5b;
}

.admin-bhk-row__btn--remove:hover {
    background: rgba(214, 69, 69, 0.1);
    border-color: rgba(214, 69, 69, 0.35);
    color: #d64545;
}

/* Amenities picker, grouped by category */
.admin-amenity-categories {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.admin-amenity-category {
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.9rem 1rem;
}

.admin-amenity-category__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: #242321;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}

.admin-amenity-category__title::-webkit-details-marker {
    display: none;
}

.admin-amenity-category__title::before {
    content: "\f229";
    font-family: "bootstrap-icons";
    font-size: 0.7rem;
    color: #8a7a63;
    transition: transform 0.2s ease;
}

.admin-amenity-category[open] > .admin-amenity-category__title::before {
    transform: rotate(90deg);
}

.admin-amenity-category__title i {
    color: #a46f35;
    font-size: 1rem;
}

.admin-amenity-category__count {
    margin-left: auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: rgba(176, 129, 73, 0.12);
    color: #8d6334;
    font-size: 0.75rem;
    font-weight: 650;
}

.admin-amenity-category .admin-amenities-grid {
    margin-top: 0.85rem;
}

/* Amenities picker grid */
.admin-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
}

.admin-amenity-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid rgba(36, 35, 33, 0.09);
    border-radius: 0.65rem;
    background: #fbfaf7;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.admin-amenity-item:hover {
    border-color: rgba(176, 129, 73, 0.4);
    background: rgba(176, 129, 73, 0.05);
}

.admin-amenity-item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
    accent-color: #b08149;
    cursor: pointer;
}

.admin-amenity-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-amenity-item .amenity-icon-glyph {
    width: 30px !important;
    height: 30px !important;
    border-radius: 0.55rem;
    background: rgba(176, 129, 73, 0.11);
    color: #a46f35;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.admin-amenity-item span {
    color: #3a3733;
    font-size: 0.84rem;
    font-weight: 550;
}

/* Amenity catalogue */
.amenity-manager__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.amenity-manager__header h2 {
    margin: 0.2rem 0 0.35rem;
    color: #242321;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 750;
    letter-spacing: -0.035em;
}

.amenity-manager__eyebrow {
    color: #a46f35;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.amenity-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.amenity-summary__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(43, 38, 31, 0.045);
}

.amenity-summary__icon,
.amenity-category__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 0.8rem;
    background: linear-gradient(145deg, #fff8ed, #f4e4cc);
    color: #a46f35;
    font-size: 1.1rem;
}

.amenity-summary__item div {
    display: flex;
    flex-direction: column;
}

.amenity-summary__item strong {
    color: #242321;
    font-size: 1.3rem;
    line-height: 1.1;
}

.amenity-summary__item span:last-child {
    margin-top: 0.2rem;
    color: #797570;
    font-size: 0.78rem;
}

.amenity-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 1.1rem;
    padding: 0.85rem;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 35px rgba(43, 38, 31, 0.055);
    backdrop-filter: blur(12px);
}

.amenity-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(36, 35, 33, 0.12);
    border-radius: 0.75rem;
    background: #fbfaf8;
    color: #918b83;
}

.amenity-search:focus-within {
    border-color: rgba(176, 129, 73, 0.55);
    box-shadow: 0 0 0 3px rgba(176, 129, 73, 0.1);
}

.amenity-search input {
    min-width: 0;
    flex: 1;
    padding: 0.7rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #242321;
    font-size: 0.9rem;
}

.amenity-search button {
    display: none;
    border: 0;
    background: transparent;
    color: #817b74;
}

.amenity-search button.is-visible {
    display: inline-flex;
}

.amenity-filter {
    display: flex;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding-bottom: 0.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.amenity-filter button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(36, 35, 33, 0.09);
    border-radius: 999px;
    background: #fff;
    color: #6f6a64;
    font-size: 0.76rem;
    font-weight: 650;
    cursor: pointer;
}

.amenity-filter button:hover,
.amenity-filter button.is-active {
    border-color: #b08149;
    background: #b08149;
    color: #fff;
}

.amenity-category {
    margin-bottom: 1rem;
    padding: 1.15rem;
    border: 1px solid rgba(36, 35, 33, 0.075);
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 14px 40px rgba(43, 38, 31, 0.045);
}

.amenity-category__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.amenity-category__header h3 {
    margin: 0;
    color: #292724;
    font-size: 1rem;
    font-weight: 720;
}

.amenity-category__header p {
    margin: 0.12rem 0 0;
    color: #918b83;
    font-size: 0.74rem;
}

.amenity-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem;
}

.amenity-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 82px;
    padding: 0.75rem;
    border: 1px solid rgba(36, 35, 33, 0.08);
    border-radius: 0.9rem;
    background: #fcfbf9;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.amenity-card:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 129, 73, 0.35);
    box-shadow: 0 10px 24px rgba(58, 45, 30, 0.075);
}

.amenity-card.is-inactive {
    opacity: 0.6;
}

.amenity-card__visual,
.amenity-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.amenity-icon-glyph {
    border-radius: 0.65rem;
    background: rgba(176, 129, 73, 0.11);
    color: #a46f35;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.amenity-card__visual {
    width: 48px;
    height: 48px;
    border-radius: 0.85rem;
    background: linear-gradient(145deg, #fff9f0, #f3e2ca);
    color: #a46f35;
    font-size: 1.35rem;
}

.amenity-card__content {
    min-width: 0;
}

.amenity-card__content h4 {
    margin: 0 0 0.3rem;
    overflow: hidden;
    color: #302e2a;
    font-size: 0.84rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amenity-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #9a8170;
    font-size: 0.68rem;
}

.amenity-status.is-active {
    color: #43885e;
}

.amenity-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.amenity-card__actions form {
    margin: 0;
}

.amenity-no-results {
    padding: 4rem 1rem;
    text-align: center;
    color: #817b74;
}

.amenity-no-results > i {
    font-size: 2rem;
    color: #b08149;
}

.amenity-no-results h3 {
    margin: 0.65rem 0 0.25rem;
    color: #302e2a;
    font-size: 1rem;
}

.amenity-no-results p {
    margin: 0;
    font-size: 0.82rem;
}

.amenity-modal {
    width: min(620px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1.2rem;
    background: #fff;
    color: #2d2a27;
    box-shadow: 0 30px 90px rgba(27, 22, 17, 0.28);
    overflow: auto;
}

.amenity-modal[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.amenity-modal::backdrop {
    background: rgba(34, 30, 26, 0.46);
    backdrop-filter: blur(4px);
}

.amenity-modal__header,
.amenity-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
}

.amenity-modal__header {
    border-bottom: 1px solid rgba(36, 35, 33, 0.08);
}

.amenity-modal__header h3 {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
}

.amenity-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(36, 35, 33, 0.1);
    border-radius: 0.7rem;
    background: #fff;
    color: #6f6a64;
}

.amenity-modal__body {
    padding: 1.3rem;
}

.amenity-modal__footer {
    border-top: 1px solid rgba(36, 35, 33, 0.08);
    background: #fbfaf8;
}

.amenity-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr);
    gap: 0.8rem;
}

.amenity-icon-picker {
    display: flex;
    align-items: stretch;
    gap: 0.65rem;
}

.amenity-icon-picker__preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex: 0 0 48px;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, #fff8ed, #f4e4cc);
    color: #a46f35;
    font-size: 1.25rem;
}

.amenity-current-icon {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.55rem;
    padding: 0.65rem;
    border-radius: 0.7rem;
    background: #f8f5f0;
    color: #77716a;
    font-size: 0.76rem;
}

.amenity-active-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem;
    border: 1px solid rgba(36, 35, 33, 0.09);
    border-radius: 0.8rem;
    cursor: pointer;
}

.amenity-active-toggle input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: #b08149;
}

.amenity-active-toggle span {
    display: flex;
    flex-direction: column;
}

.amenity-active-toggle strong {
    color: #302e2a;
    font-size: 0.84rem;
}

.amenity-active-toggle small {
    margin-top: 0.12rem;
    color: #817b74;
    font-size: 0.72rem;
}

@media (max-width: 767px) {
    .amenity-manager__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .amenity-summary {
        grid-template-columns: 1fr;
    }

    .amenity-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .amenity-form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .amenity-modal__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .amenity-modal__footer .admin-btn-primary,
    .amenity-modal__footer .admin-btn-secondary {
        justify-content: center;
    }
}

/* Sticky-feeling action bar at the end of a long form */
.admin-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
}

@media (max-width: 575px) {
    .admin-form-section {
        padding: 1.25rem 1.1rem 1.4rem;
    }

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

/* ============================================================
   Page width — one rule for every capped section
   ============================================================
   Bootstrap stops growing .container at 1320px (its xxl step), which
   leaves 620px of dead margin either side on a 2560px display while
   full-bleed section backgrounds — the footer especially — still run
   edge to edge. That mismatch is what reads as "the footer stretched
   but the content did not".

   Every capped section on the site, the footer included, is a
   .container, so widening it here keeps them in lockstep by
   construction rather than by remembering to update several rules.
   The cap still exists: line length stays readable, it simply lands
   nearer the screen on large monitors.
   ============================================================ */
:root {
  /* One number for how wide a page may get. Anything that caps its width
     reads it from here, so sections cannot drift apart from each other or
     from the footer. Below 1800px Bootstrap's own responsive steps apply
     unchanged (540 / 720 / 960 / 1140 / 1320). */
  --page-max-width: 1320px;
}

@media (min-width: 1800px) {
  :root {
    --page-max-width: 1560px;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: var(--page-max-width);
  }
}