/*Catalog listing*/

.search-overlay {
    position:absolute;
    background-color:#000000;
    opacity:0.7;
    top:0px;
    left:0;
    width:0;
    height:0;
    z-index:100
  }

  .search-loading {
    position:absolute;
    top:50%;left:50%;
    font-size:70px;
    z-index:101;
    opacity:0.5   
  }

  .search-body {
    padding:100px 30px 30px 100px;
    position:relative
  }

  .profile-body {
    position:relative
  }

  .search-left {
    overflow-y: scroll;
    padding-right:10px;
    height:80vh
  }

  .view-active {
    background-color: #f0f0f0;
  }

  .btn-search
  {
    border-width:1px;
    text-transform: capitalize;
    padding:6px 12px;
    margin-right:10px;
  }

  .btn-search i
  {
    margin-left:5px
  }

 /*Catalog listing Grid*/

 .grid-wrap {
  height:250px;
  position: relative;
 }

 .grid-wrap-masonry {
  position: relative;
 }

 .grid-image {
  display:table;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
 }

 .grid-lightbox {
  position:absolute;
  top:15px;
  right:17px;
  font-size:24px;
  color:#ffffff;
  z-index:99
 }

 .grid-lightbox-hex {
  font-size:24px;
  color:#ffffff;
  margin:5px;
 }

 .grid-preview {
  max-height:250px
 }

 .grid-description {
  height:100px;
  padding-top:7px
 }

 .grid-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 }

 .grid-tools {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:10px;
  text-align:center;
  /*background-color:rgba(0,0,0,0.3);*/
  opacity:0;
 }





 .grid-cart {
  font-size:18px;
  color:#ffffff;
 }

 .grid-package {
  font-size:18px;
  color:#ffffff;
  margin-left:15px
 }

 .btn-qty{
  font-size:18px;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
 }

 .select-border {
  border:1px #bdbdbd solid !important
 }




.chat {
  width: 100%;
  border: solid 1px #EEE;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.messages {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.message {
  border-radius: 20px;
  padding: 8px 15px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

.yours {
  align-items: flex-start;
}

.yours .message {
  margin-right: 25%;
  background-color: #EEE;
  position: relative;
}

.yours .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  height: 20px;
  width: 20px;
  background: #EEE;
  border-bottom-right-radius: 15px;
}
.yours .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
}

.mine {
  align-items: flex-end;
}

.mine .message {
  color: white;
  margin-left: 25%;
  background: rgb(0, 120, 254);
  position: relative;
}

.mine .message.last:before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -8px;
  height: 20px;
  width: 20px;
  background: rgb(0, 120, 254);
  border-bottom-left-radius: 15px;
}

.mine .message.last:after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 20px;
  background: white;
  border-bottom-left-radius: 10px;
}

.red {
  color:red;
}

.terms {
  width:100%;
  height:150px;
  border:1px solid #e0dede;
}

.disabled {
  color: #cbcbcb
}

/* ====== Photo Sales UI Upgrade ====== */
:root{
  --pvs-radius: 16px;
  --pvs-shadow: 0 10px 30px rgba(0,0,0,.12);
  --pvs-border: rgba(0,0,0,.08);
  --pvs-text: #111;
  --pvs-muted: rgba(0,0,0,.6);
  --pvs-cta: #0b5fff;
  --pvs-cta2: #ff3d71;
}

.grid-wrap,
.grid-wrap-masonry{
  border: 1px solid var(--pvs-border);
  border-radius: var(--pvs-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.grid-wrap:hover,
.grid-wrap-masonry:hover{
  transform: translateY(-3px);
  box-shadow: var(--pvs-shadow);
}

.grid-image{
  width: 100%;
  height: 100%;
  display: block;
}

.grid-preview{
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.grid-wrap:hover .grid-preview{
  transform: scale(1.02);
}

/* overlay gradient for readability */
.grid-wrap::after,
.grid-wrap-masonry::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.grid-wrap:hover::after,
.grid-wrap-masonry:hover::after{
  opacity: 1;
}

/* tools bar (CTA) */
.grid-tools{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding: 12px 12px 14px;
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  opacity:0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 5;
}
.grid-wrap:hover .grid-tools,
.grid-wrap-masonry:hover .grid-tools{
  opacity:1;
  transform: translateY(0);
}

/* CTA buttons style */
.grid-tools .btn,
.grid-tools a.btn,
.grid-tools button{
  border-radius: 999px;
  border: 0;
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.grid-tools .btn-primary{
  background: var(--pvs-cta);
}
.grid-tools .btn-primary:hover{
  filter: brightness(1.05);
}

.grid-tools .btn-outline-light{
  background: rgba(255,255,255,.18);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
}
.grid-tools .btn-outline-light:hover{
  background: rgba(255,255,255,.28);
}

/* title/price area more elegant */
.grid-description{
  height:auto;
  padding: 12px 12px 14px;
}
.grid-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--pvs-text);
  margin-bottom: 6px;
}
.grid-description small,
.grid-description .text-muted{
  color: var(--pvs-muted) !important;
}

/* badges */
.pvs-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:6;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  color:#fff;
  background: var(--pvs-cta2);
  box-shadow: 0 10px 20px rgba(0,0,0,.16);
}
.pvs-badge.alt{
  background: #12b886;
}

/* make tools visible on touch devices */
@media (hover: none){
  .grid-tools{ opacity:1; transform:none; }
  .grid-wrap::after, .grid-wrap-masonry::after{ opacity:1; }
}





/* CART ACTIONS - responsive, safe */
.cart-body .text-center.mb-2{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.cart-body .text-center.mb-2 .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  flex: 1 1 calc(50% - 8px); /* 2 por fila en m贸vil */
  min-width: 120px;
}

@media (min-width: 576px){
  .cart-body .text-center.mb-2 .btn{
    flex: 0 0 auto; /* en desktop se alinean en una sola fila si caben */
  }
}
/* =========================
   SEARCH GRID (definitivo, sin choques)
   Solo aplica dentro del Search (#body-pd)
   ========================= */

/* Mata el layout viejo (height fija + absolute centering) */
#body-pd .grid-wrap{
  height: auto !important;
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Quita el “centering” absoluto que crea espacios en blanco */
#body-pd .grid-image{
  position: relative !important;
  display: block !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* El frame define el tamaño */
#body-pd .grid-thumb-frame{
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #111 !important;
  position: relative !important;
}

/* La imagen llena el frame */
#body-pd .grid-thumb-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Quita “description height fija” que a veces empuja espacios */
#body-pd .grid-description{
  height: auto !important;
}

/* =========================
   SEARCH selection checkmark
   ========================= */
#body-pd .pvs-checkmark{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d6efd !important;
  color: #fff !important;
  z-index: 50 !important;        /* más alto para ganarle a overlays */
  opacity: 0 !important;
  transform: scale(.92) !important;
  transition: .15s ease !important;
  pointer-events: none !important;
}

#body-pd .pvs-selectable.pvs-selected .pvs-checkmark{
  opacity: 1 !important;
  transform: scale(1) !important;
}

#body-pd .pvs-selectable.pvs-selected{
  outline: 3px solid rgba(13,110,253,.95) !important;
  outline-offset: -3px !important;
}