#publish-section, #profile-section, #ads-section {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  z-index: 3000; 
  animation-duration: 0.2s;
  animation-fill-mode: forwards;
}
body.publish-open #left-section {
  transform: translateX(-100%);
}

#profile-section.second-pushed,
#publish-section.second-pushed,
#main-content.second-pushed,
#app-header.second-pushed {
  transform: translateX(250px);
  transition: transform 0.3s ease;
}


.second-pushed {
  transform: translateX(250px);
  transition: transform 0.3s ease;
}
.reverse-pushed {
  transform: translateX(-250px);
  transition: transform 0.3s ease;
}



/*Section annonces*/
/* Section modal */
.modal-section {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 800px;
  height: auto;
  background: white;
  padding: 1px;
  z-index: 3010;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  overflow: hidden;
}
/* Overlay pour desktop */
.overlay {
  display: none;
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 3000;
}

.ads-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
  height: 100%;
  box-sizing: border-box; 
}

.ads-header{
position: sticky;
top: 0;
z-index: 10;
background: #fff;
border-bottom: 1.5px solid #ddd;
display: flex;
align-items: center;
justify-content: flex-start; 
}

#ads-back-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 19px 16px;
  cursor: pointer;
  background: none;
  border: none;
}
#ads-back-btn span {
  color: black;
  font-weight: bold;
  font-size: 21px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
#ads-back-btn svg {
  color: black;
}
.ads-content{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
   min-height: 0;
}
/* Skeleton Loader */
.skeleton {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.skeleton-img {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-line.short {
  width: 40%;
}

.skeleton-line.medium {
  width: 60%;
}

.skeleton-line.long {
  width: 80%;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.ad-item {
  /* border-bottom: 1px solid #eee; */
  padding: 12px 0;
}

.ad-item-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ad-image {
   flex-shrink: 0;
  width: 90px;
  height: 90px; /* hauteur fixe */
  /* border: 2px solid #ddd;  */
  /* border-radius: 5px; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
   background: #f8f8f8;
}

.ad-image img {
width: 100%;
  height: 100%; 
 object-fit: cover;
object-position: center;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 8px;

}

.ad-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ad-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.ad-text p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #555;
}


/*Section annonces*/
@keyframes slide-in-right {
  from { transform: translateX(100%); } 
  to   { transform: translateX(0);    }
}

@keyframes slide-out-right {
  from { transform: translateX(0);    } 
  to   { transform: translateX(100%); }
}
.slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}
.slide-out-right {
  animation: slide-out-right 0.3s ease-in forwards;
}


body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}
/*Section vue de l'annonce*/
.view-modal-section {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 800px;
  height: auto;
  background: white;
  padding: 1px;
  z-index: 3010;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  overflow: hidden;
}
.view-ads-content{
  padding: 16px; 
}
.close-class{
 position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1.5px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
#close-ad-detail{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 19px 16px;
  cursor: pointer;
  background: none;
  border: none;
}
#close-ad-detail svg {
  color: black;
}
#close-ad-detail span {
  color: black;
  font-weight: bold;
  font-size: 21px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', Arial, sans-serif;
}
.ad-actions{
margin-top:15px; display:flex; gap:10px;
}
.btn-danger{
  border: 1px solid #CCC;
  color: white;
  font-size: 18px;
  font-weight: 500;
  background-color: red;
  /* padding: 1em; */
  width: 100%;
  height: 53px;
  border-radius: 0.5em;

}




@media (max-width: 767px) {
  #publish-section, #profile-section  {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: white;
    z-index: 1000;
  }
  .slide-in-right {
    animation: slide-in-right 0.3s ease-out forwards;
  }
  .slide-out-right {
    animation: slide-out-right 0.3s ease-in forwards;
  }
  
   .modal-section {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  } 
  .overlay {
    display: none;
  }
 /* section vue de l'annonce*/
 .view-modal-section {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }  
  .view-ads-panel {
   display: flex;
  flex-direction: column;
  background: white;
  border-radius: inherit;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
.view-ads-content {
  flex: 1;
  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
     background: white;
  padding: 16px;
  min-height: 0;
} 
.ad-input,
.ad-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  margin: 8px 0;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ad-input:focus,
.ad-select:focus {
  /* border-color: #007bff;
  box-shadow: 0 0 4px rgba(0,123,255,0.4); */
  outline: none;
}

.ad-desc {
  resize: vertical;
  min-height: 120px;
}

.ad-price-group {
  display: flex;
  align-items: stretch;
  /* gap: 3px; */
}

.ad-price-group .ad-price {
  flex: 1;
  border-radius: 6px 0 0 6px;
  border-right: none;
}

.ad-price-group .ad-currency {
  width: 100px;
  border-radius: 0 6px 6px 0;
  border-left: none;
  background: #f9f9f9;
  cursor: pointer;
}

.ad-title {
  font-weight: 500;
}

  .close-modal-ads {
  display: none;
}
}

@media (min-width: 768px) {
#ads-section{
position: fixed;
top: 50%;
left: 50%;
width: 900px;
max-width: 90%;
height: 100px; 
max-height: 70%; 
background: #fff;
}

/* Animations pour desktop */
@keyframes fade-in-scale {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes fade-out-scale {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.fade-in-scale {
  animation: fade-in-scale 0.2s ease-out forwards;
}

.fade-out-scale {
  animation: fade-out-scale 0.2s ease-in forwards;
}

@keyframes fade-in-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out-overlay {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.fade-in-overlay {
  animation: fade-in-overlay 0.2s ease-out forwards;
}

.fade-out-overlay {
  animation: fade-out-overlay 0.2s ease-in forwards;
}


.modal-section {
  min-height: 80vh;
}


.view-modal-section{
 position: fixed;
top: 50%;
left: 55%;
width: 900px;
max-width: 60%;
height: 1000px; 
max-height: 80%; 
background: #fff;
}


.view-ads-panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: inherit;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; 
  height: 100%;
  box-sizing: border-box; 
}


.ad-input,
.ad-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  margin: 8px 0;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}


#ads-back-btn svg {
    display: none;
  } 

.ad-desc {
  resize: vertical;
  min-height: 120px;
}

.ad-price-group {
  display: flex;
  align-items: stretch;
  /* gap: 3px; */
}

.ad-price-group .ad-price {
  flex: 1;
  border-radius: 6px 0 0 6px;
  border-right: none;
}

.ad-price-group .ad-currency {
  width: 100px;
  border-radius: 0 6px 6px 0;
  border-left: none;
  background: #f9f9f9;
  cursor: pointer;
}



.close-modal-ads {
  display: block;
}



}