/* ==== Generic images & upload boxes ==== */
.bike-image {
    max-width: 100%;  
    height: auto;      
}

.no-image-icon {
    font-size: 2rem;
    color: gray;
    display: block;
    text-align: center;
    margin-top: 10px;
}

.image-upload-box {
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);  /* ei lähtövarjoa */
    transition: box-shadow 0.2s ease;    /* pehmeä varjostuksen muutos */
}

.image-upload-box:hover {
    /* symmetrinen varjo ilman pystysiirtymää -> ei näytä lisäreunalta alhaalla */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.18);
}

.image-upload-box img {
    display: block;  /* poistaa inline-kuvan baseline-välin, ei ylimääräistä palkkia alareunassa */
}

#receipt_file_name:empty {
    display: none; /* ei varaa tilaa ennen kuin teksti "Valittu tiedosto: ..." asetetaan */
}

/* ==== Banner & preview images ==== */

/* Header banner image replaced from background-image to <img> */
.ad-banner-img {
  width: 100%;
  height: 100%; /* fill the aspect-ratio container */
  object-fit: contain; /* show full image without cropping */
  display: block;
}

/* Banner preview image styles moved from template create_ad (CSP-safe) */
.banner-preview {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
  background-color: #000; /* mustat reunat jos ei täytä koko tilaa */
  display: block;
  margin: 0 auto;
}

/* ==== Thumbnail & small image utilities ==== */

.img-thumb-120 {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

/* 150x150 kuvagallerialle */
.img-thumb-150 {
  width: 150px;
  height: 150px;
  object-fit: cover;
}

/* chat-näkymä: pikkukuva */
.img-max-120 { max-width: 120px; }

/* chat-lista: pikkukuva */
.img-max-100 { max-width: 100px; }