/* Styles of list/templates/list/sub_components/card_public.html, moved out of its inline <style>. */

/* === Custom Wish Tile === */
.wish-tile{
  width: 18rem;
  background: rgba(17,19,24,0.82);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .25s ease;
  overflow: hidden;
}
.wish-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.3);
}


.wish-image-box {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  background: var(--wish-bg, #f7f7f8);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.wish-image {
  width: 100%;
  height: 100%;
  object-fit: cover;                         /* default: crop to fill box */
  object-position: center;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  transition: object-fit .3s ease, opacity .3s ease;
}

/* When deviation is large → show full image and background */
.wish-image-box.show-full .wish-image {
  object-fit: contain;                       /* show full image */
  width: auto;
  height: 100%;                              /* make sure height fills box */
  opacity: 0.9;                              /* optionally fade a little so background shows behind */
}

.wish-price {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ws-brand, #fea64d);
  margin-top: -0.25rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  background: rgba(254, 166, 77, 0.12);
  border-radius: 8px;
  padding: 2px 8px;
}

.wish-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;     /* number of lines */
  overflow: hidden;
  /* text-overflow does not behave the same here for more lines, but this technique works */
}

.wish-text{
  color: rgba(255,255,255,0.9);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}


/* collapsed (default) */
.wish-text.clamp {
  -webkit-line-clamp: 3;
}

/* expanded */
.wish-text.expanded {
  -webkit-line-clamp: unset;
  display: block !important;
  overflow: visible;
}
/* place mehr… directly under the text, subtle spacing */
.wish-more {
  display: inline-block;
  margin-top: 4px;   /* <- adjust spacing here */
  font-size: 0.9em;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  text-decoration: underline;
}


/* Actions */
.wish-actions{
  display:flex; gap:.5rem; justify-content:space-between; align-items:center; flex-wrap:wrap;
}

/* 🟠 Reserve (solid) */
.btn-reserve{
  background-color:#FEA64D;
  color:#16181d; font-weight:700; border:none; border-radius:10px;
  box-shadow:0 3px 10px rgba(254,166,77,0.25);
  transition:all .2s ease-in-out;
}
.btn-reserve:hover{
  background-color:#f18f31;
  color:#0b0d10;
  box-shadow:0 6px 18px rgba(254,166,77,0.4);
  transform:translateY(-1px);
}
.btn-reserve:active{
  background-color:#e78125;
  transform:translateY(0);
}

/* 🟠 Reserve (disabled) */
.btn-reserve-disabled{
  background:#a1a1a1;
  color:#1b1f27;
  font-weight:700;
  border:none;
  border-radius:10px;
  opacity:.9;
  cursor:not-allowed;
}

/* 🟠 Link/Open (outlined) */
.btn-reserve-outline{
  background:transparent;
  color:#FEA64D;
  font-weight:700;
  border:2px solid rgba(254,166,77,0.7);
  border-radius:10px;
  transition:all .2s ease-in-out;
}
.btn-reserve-outline:hover{
  background-color:rgba(254,166,77,0.15);
  border-color:#FEA64D;
  color:#fff;
  transform:translateY(-1px);
}
.btn-reserve-outline:active{
  background-color:rgba(254,166,77,0.3);
  transform:translateY(0);
}

/* 🏷️ Reserved ribbon */
.reserved-banner{
  position:absolute; top:22px; left:-72px;
  width:260px; padding:7px 0;
  text-align:center; white-space:nowrap;
  background:linear-gradient(135deg,#e63946 0%,#b71c1c 85%);
  color:#fff; font-weight:800;
  font-size:clamp(0.78rem,1.1vw,0.95rem);
  letter-spacing:.6px;
  text-transform:uppercase;
  transform:rotate(-40deg);
  transform-origin:center;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  text-shadow:0 2px 3px rgba(0,0,0,.4);
  border-radius:2px;
  z-index:10;
  pointer-events:none;
}

@media (max-width:575.98px){
  .wish-tile{ width:100%; }
  .reserved-banner{ left:-60px; width:220px; top:18px; }
}
@media (min-width:576px) and (max-width:991.98px){
  .wish-tile{ width: min(18rem, calc(50vw - 2rem)); }
}
.carousel .carousel-control-prev,
.carousel .carousel-control-next {
  min-width: 44px;
  min-height: 44px;
}