/* ===============================
   responsive.css — mobile-first
   =============================== */

/* ==== XS (≤360px) ==== */
@media (max-width: 360px) {

  .button-container { margin-bottom: 60px; }
  .button-container button {
    min-height: 35px;
    padding: 8px;
    font-size: 13px;
  }

  .product img, .product video { max-height: 55vh; }

  .form, #addProductForm {
    padding: 30px 20px 20px;
  }

  .form h2 { font-size: 1.5rem; }

  button {
    min-width: 120px;
    min-height: 35px;
    font-size: 13px;
    padding: 6px 10px;
  }
}

/* ==== S / mobiel (≤600px) ==== */
@media (max-width: 600px) {

  .button-container { margin-bottom: 70px; }
  .button-container button {
    min-height: 40px;
    padding: 10px;
    font-size: 14px;
  }

  .product img, .product video { max-height: 60vh; }

  .product-info {
    font-size: 1rem;
    max-width: 90%;
    gap: 3px;
    margin-top: 4px;
  }

  /* Grote productweergave */
  .media-container img, .media-container video {
      max-height: calc(100vh - 200px);
      max-width: 95%;
  }

  /* Kleine thumbnails/slides */
  .media-slide img, .media-slide video {
      max-height: 22vh;
      max-width: 90vw;
  }

  .like-button { width: 52px; height: 52px; font-size: 2.1rem; }

  .product-details {
    width: 98vw;
    max-height: 60vh;
    padding: 0 12px 12px;
    border-radius: 20px 20px 0 0;
  }

  .form, #addProductForm {
    width: 95%;
    max-height: 85vh;
    padding: 40px 24px 24px;
    margin-bottom: 80px;
  }

  .form input, .form textarea, .form select {
    font-size: 16px;
    padding: 12px;
  }
  .form button {
    padding: 12px;
    font-size: 16px;
    margin-bottom: 10px;
  }

  button {
    min-width: 140px;
    min-height: 40px;
    font-size: 14px;
    padding: 8px 12px;
  }

  .navbar { padding: 5px 10px; }
  .login-status { font-size: 12px; }

  #addProductForm select, #custom_state_div input {
    font-size: 0.9rem;
    padding: 10px;
  }

  .product .state { font-size: 1rem; }
}

/* ==== Tablets / kleine laptops (768px–1366px) ==== */
@media (min-width: 768px) and (max-width: 1366px) {
  .media-container img, .media-container video {
    max-width: 85%;
    max-height: 75%;
  }
  .media-slide img, .media-slide video { max-height: 200px; }

  #addProductForm h1, #addProductForm h2,
  .form h1, .form h2 { text-align: left; }

  #addProductForm form, .form .stack { gap: 20px; }
}

/* ==== Desktop-upgrade (≥1024px) ==== */
@media (min-width: 1024px) {
  #addProductForm {
    left: clamp(40px, 6vw, 96px);
    right: auto;
    margin-inline: 0;
    transform: none;
    width: min(92vw, 900px);
    max-width: 900px;
    border: 2px solid #76ff03;
    border-radius: 16px;
    box-shadow: 0 0 22px 4px rgba(118,255,3,.32);
    padding: 36px 28px 24px;
  }
  #addProductForm form { gap: 22px; }

  .form {
    left: clamp(40px, 6vw, 96px);
    transform: none;
    width: min(95vw, 680px);
    max-width: 680px;
    border-width: 2px;
    box-shadow: 0 0 22px 4px rgba(118,255,3,.32);
    padding: 44px 28px 24px;
    text-align: left;
  }

  .form .stack { gap: 22px; }
  .form input, .form textarea, .form select {
    padding: 16px 14px;
    min-height: 52px;
  }
  .form button {
    min-height: 52px;
    padding: 16px 14px;
  }
}

/* ==== Grote desktop (≥1280px) ==== */
@media (min-width: 1280px) {
  #addProductForm { max-width: 960px; }
  .form { max-width: 720px; }
}

/* ==== Very large (≥1366px) ==== */
@media (min-width: 1366px) {
  .media-container img, .media-container video {
    max-height: calc(100vh - 320px);
    max-width: 100%;
  }
  .product-info .price, .products-container .price { margin-bottom: 4px; }
  .product-info .state, .products-container .state { margin-top: 4px; }
}

/* ==== Hoogte-gebaseerde tweaks ==== */
@media screen and (max-height: 800px) {
  .media-container img, .media-container video {
    max-height: calc(100vh - 300px);
  }
}
@media screen and (max-height: 650px) {
  .media-container img, .media-container video {
    max-height: calc(100vh - 280px);
  }
}
@media screen and (max-height: 500px) {
  .media-slide img, .media-slide video {
    max-height: 14vh;
    max-width: 75vw;
  }
}
@media screen and (min-height: 700px) {
  .product { padding-top: 60px; }
}

/* ==== Safety: forceer mobiele layout ≤767px ==== */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  #addProductForm, .form {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(95vw, 460px) !important;
    border-width: 3px !important;
    border-radius: 20px !important;
    box-shadow: 0 0 28px 6px rgba(118,255,3,.35) !important;
  }
}

/* ==== Universele afbeelding- en videostijl ==== */
.product img,
.product video,
.media-container img,
.media-container video,
.media-slide img,
.media-slide video {
  max-width: 100%;
  height: auto;
  max-height: 50vh;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* ==== Chatpagina responsive ==== */
@media (max-width: 600px) {
    .chat-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .chat-header h1 {
        font-size: 1rem;
    }
    #messageForm textarea {
        font-size: 0.9rem;
    }
}

@media (min-width: 601px) {
    .chat-header h1 {
        font-size: 1.4rem;
    }
}
/* =============================
   RESPONSIVE DESIGN
   ============================= */
@media (max-width: 768px) {
    .chat-header h1 {
        font-size: 1.1rem;
    }
    .message-block {
        max-width: 85%;
        font-size: 0.9rem;
    }
    #messageForm textarea {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .chat-header {
        padding: 10px;
    }
    .chat-header h1 {
        font-size: 1rem;
    }
    .message-block {
        max-width: 90%;
        padding: 8px 10px;
    }
}