.containerrr{
  padding: 20px; width: 100%;
}
.containerrr .head-agences{
  width: 100%;
}


@keyframes slideDown {
   from {
       opacity: 0;
       transform: translateY(-15px);
   }
   to {
       opacity: 1;
       transform: translateY(0);
   }
}


.search-filters {
   background: #fff;
   border-radius: 10px;
   padding: 20px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 100%;
   width: 100%;
   margin: 20px auto;
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   display: none;
 }
 
 .filters-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 10px;
 }
 
 .filters-close-btn {
   background: none;
   border: none;
   font-size: 20px;
   cursor: pointer;
 }
 
 .filters-content {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
   width: 100%;
 }
 
 .filter-group {
   flex: 1;
   min-width: 250px;
   display: flex;
   flex-direction: column;
 }
 
 .filter-group label {
   font-size: 14px;
   margin-bottom: 5px;
   color: #333;
 }
 
 .filter-group select,
 .filter-group input {
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 14px;
   width: 100%;
   outline-color: #0092ca;
 }
 
 @media (max-width: 768px) {
   .search-filters {
       flex-direction: column;
       gap: 10px;
   }
 }



.pagination-controls {
 text-align: center;
 margin-top: 40px;
}


.pagination-controls span {
 margin: 0 10px;
}




/* model for contacter l'agence */

.modal-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.5);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 999;
}

.modal-content {
 background: white;
 padding: 2rem;
 border-radius: 10px;
 width: 90%;
 max-width: 400px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 position: relative;
 text-align: start;
 
}
.modal-content .titlee{
 margin: 15px 0;
}
.modal-content .Prestige{
 margin: 15px 0;
}
.modal-content .box-infor{
 margin: 10px 0;
 height: auto;
}
.modal-content p{
 color: #666;
 font-size: 16px;
}
.box-infor label{
 color: #555;
}

.box-infor input{
 margin-top: 10px;
 width: 100%;
 height: 40px;
 padding: 10px ;
 border-radius: 8px;
 outline-color: #0092ca;
 border: 1px solid #b3b3b3a6;
}
.box-infor textarea{
 margin-top: 10px;
 border-radius: 8px;
 border: 1px solid #b3b3b3a6;
 padding: 10px;
 width: 100%;
 height: 100px;
}
.close-btn {
 position: absolute;
 right: 15px;
 top: 10px;
 font-size: 24px;
 cursor: pointer;
}

.send-button {
 padding: 10px;
 width: 100%;
}




/* model visit */
.visit-modal-overlay {
 position: fixed;
 top: 0; left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.4);
 display: none;
 justify-content: center;
 align-items: center;
 z-index: 999;
 text-align: start;
}

.visit-modal-box {
 background-color: #fff;
 border-radius: 12px;
 padding: 30px 25px;
 width: 100%;
 max-width: 400px;
 position: relative;
 box-shadow: 0 10px 25px rgba(0,0,0,0.2);
 font-family: Arial, sans-serif;
}

.visit-close-btn {
 position: absolute;
 top: 15px;
 right: 20px;
 font-size: 24px;
 cursor: pointer;
 color: #666;
}

.visit-modal-box h2 {
 margin-bottom: 15px;
 font-size: 20px;
}

.visit-property-info {
 font-size: 14px;
 margin-bottom: 20px;
}

.visit-property-info strong {
 font-weight: bold;
 color: #000;
}

.visit-agency {
 font-size: 13px;
 color: #666;
}

.visit-modal-box label {
 display: block;
 margin-top: 10px;
 margin-bottom: 6px;
 font-size: 14px;
}

.visit-modal-box input,
.visit-modal-box textarea,
.visit-modal-box select {
 width: 100%;
 padding: 10px 12px;
 font-size: 14px;
 border: 1px solid #ccc;
 border-radius: 8px;
 resize: none;
 outline: none;
 box-sizing: border-box;
}

.visit-modal-box textarea {
 height: 80px;
}

.visit-send-btn {
 margin-top: 20px;
 background-color: #1a73e8;
 color: white;
 border: none;
 padding: 12px;
 border-radius: 8px;
 width: 100%;
 font-size: 15px;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.visit-send-btn:hover {
 background-color: #0c59c5;
}

.visit-note-footer {
 font-size: 12px;
 color: #666;
 margin-top: 10px;
}




.filter-actions{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
}
.filter-actions a{
 text-decoration: none;
}
.badge-premium {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #007bff;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 10;
  animation: glowPulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 10px #007bff;
}

.badge-pro {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #100a70; /* بنفسجي احترافي */
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 12px;
  z-index: 10;
  animation: glowPulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 10px #100a70;
}

@keyframes glowPulse {
  0% {
    box-shadow: 0 0 5px #007bff, 0 0 10px #007bff;
  }
  50% {
    box-shadow: 0 0 15px #007bff, 0 0 25px #007bff;
  }
  100% {
    box-shadow: 0 0 5px #007bff, 0 0 10px #007bff;
  }
}