/* Modal + gallery (More info) */

/* Trigger button */
.card-more{
  position:absolute;
  right:16px;
  bottom:22px;
  padding:0.65rem 0.9rem;
  max-width: calc(100% - 32px);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-radius:14px;
  border:1px solid rgba(179,255,200,0.45);
  background:rgba(179,255,200,0.10);
  color:#b3ffc8;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:0.02em;
  cursor:pointer;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:0 12px 44px rgba(0,0,0,0.35);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  z-index:5;
}
.card-more:hover,
.card-more:focus-visible{
  transform: translateY(-2px);
  background:rgba(179,255,200,0.16);
  border-color: rgba(179,255,200,0.75);
}

/* Overlay */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.modal-overlay.is-open{ display:flex; }

/* Modal panel */
.modal-panel{
  width:min(920px, 100%);
  border-radius:22px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:0 30px 140px rgba(0,0,0,0.65);
  overflow:hidden;
}

.modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.modal-title{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--c-text);
  font-size:0.95rem;
}

.modal-close{
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  color:var(--c-text);
  border-radius:14px;
  padding:0.6rem 0.85rem;
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:800;
  transition: border-color .2s ease, transform .2s ease;
}
.modal-close:hover{ border-color: rgba(179,255,200,0.65); transform: translateY(-1px); }

/* Gallery */
.gallery{
  position:relative;
  padding:18px;
}

.gallery-stage{
  width:100%;
  height:min(520px, 55vh);
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(0,0,0,0.15);
}

.gallery-strip{
  height:100%;
  display:flex;
  transform: translateX(0%);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

.gallery-slide{
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}

.gallery-slide img{
  width:100%;
  height:100%;
  /* keep full image visible instead of cropping */
  object-fit:contain;
  object-position:center;
  border-radius:14px;
  user-select:none;
  -webkit-user-drag:none;
  background: rgba(0,0,0,0.18);
}


.gallery-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.gallery-arrow{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.16);
  color:var(--c-text);
  border-radius:16px;
  width:54px;
  height:42px;
  cursor:pointer;
  font-size:1.1rem;
  font-weight:900;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.gallery-arrow:hover{ transform: translateY(-2px); border-color: rgba(179,255,200,0.65); background:rgba(179,255,200,0.10); }

.gallery-indicators{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex:1;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.06);
}
.dot.is-active{ background: rgba(179,255,200,0.65); border-color: rgba(179,255,200,0.9); box-shadow:0 0 0 4px rgba(179,255,200,0.12); }

/* ── Buy button (goes to Contact Us / #order) ── */
.card-buy{
  position:absolute;
  left:16px;
  bottom:22px;
  padding:0.65rem 0.9rem;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border-radius:14px;
  border:1px solid rgba(94,173,255,0.45);
  background:rgba(94,173,255,0.10);
  color:#5eadff;
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:0.02em;
  cursor:pointer;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:0 12px 44px rgba(0,0,0,0.25);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  z-index:5;
}
.card-buy:hover,
.card-buy:focus-visible{
  transform: translateY(-2px);
  background:rgba(94,173,255,0.16);
  border-color: rgba(94,173,255,0.75);
}

/* ── More info details (left title + right price list) ── */
.modal-details{
  padding:18px;
  border-top:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.02);
}

.modal-details-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:18px;
  align-items:start;
}

.modal-details-left{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:0.02em;
  text-transform:uppercase;
}

.modal-details-pricing-title{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--c-accent1);
  margin-bottom:8px;
  font-size:0.85rem;
}

.modal-details-pricing{
  font-family:var(--font-mono);
  font-size:0.95rem;
  line-height:1.6;
  color:rgba(232,230,240,0.92);
}

@media (max-width: 720px){
  .modal-details-grid{ grid-template-columns: 1fr; }
}