/* --- SHARED BANNER --- */
#qasa-gallery-shared-banner {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 1rem 0;
  background-color: #333;
  box-sizing: content-box;
}

#qasa-gallery-shared-banner img {
  max-width: 100%;
  max-height: 100%;
}

#qasa-gallery-shared-banner div {
  position: relative;
  color: white;
  font-weight: bold;
  padding-bottom: 24px;
}

#qasa-gallery-shared-banner a {
  color: white;
  font-weight: bold;
}

#qasa-gallery-shared-banner span {
  color: white;
  font-weight: bold;
  position: absolute;
  right: -5px;
  top: -5px;
  font-size: 0.8rem;
  display: flex;
  cursor: pointer;
}

#qasa-gallery-shared-banner span::before {
  content: '';
  width: 32px;
  height: 32px;
  display: block;
  background-image: url("data:image/svg+xml,<svg ... />"); /* truncated for brevity */
  background-position: center;
  background-repeat: no-repeat;
}

/* --- GALLERY GRID --- */
#qasa-gallery,
.qasa-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 100%;
}

/* --- GALLERY ITEM --- */
.qasa-gallery-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  border-color: white;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 20px 20px 0 0;
  transition: transform 0.3s;
}

.qasa-gallery-item img {
  cursor: pointer;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qasa-gallery-item > div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 5px;
  align-items: center;
  background-color: #fff;
  padding: 6px;
}

/* --- ICONS --- */
.qasa-gallery-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 16px;
  background-color: #333;
  cursor: pointer;
}

.qasa-gallery-item-icon[data-icon='share'] {
  border-radius: 12px;
  background-color: #e7e5e5;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="gray" d="M12 12.713l-11.985-9.713h23.97l-11.985 9.713zm0 2.574l-12-9.725v15.438h24v-15.438l-12 9.725z"/></svg>');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.qasa-gallery-item-icon[data-icon='pinterest'] {
  background-color: #fff;
  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 144 144" enable-background="new 0 0 144 144" xml:space="preserve"><g><g><path fill="%23BD081C" d="M71.9,5.4C35.1,5.4,5.3,35.2,5.3,72c0,28.2,17.5,52.3,42.3,62c-0.6-5.3-1.1-13.3,0.2-19.1c1.2-5.2,7.8-33.1,7.8-33.1s-2-4-2-9.9c0-9.3,5.4-16.2,12-16.2c5.7,0,8.4,4.3,8.4,9.4c0,5.7-3.6,14.3-5.5,22.2c-1.6,6.6,3.3,12,9.9,12c11.8,0,20.9-12.5,20.9-30.5c0-15.9-11.5-27.1-27.8-27.1c-18.9,0-30.1,14.2-30.1,28.9c0,5.7,2.2,11.9,5,15.2c0.5,0.7,0.6,1.2,0.5,1.9c-0.5,2.1-1.6,6.6-1.8,7.5c-0.3,1.2-1,1.5-2.2,0.9c-8.3-3.9-13.5-16-13.5-25.8c0-21,15.3-40.3,44-40.3c23.1,0,41,16.5,41,38.4c0,22.9-14.5,41.4-34.5,41.4c-6.7,0-13.1-3.5-15.3-7.6c0,0-3.3,12.7-4.1,15.8c-1.5,5.8-5.6,13-8.3,17.5c6.2,1.9,12.8,3,19.7,3c36.8,0,66.6-29.8,66.6-66.6C138.5,35.2,108.7,5.4,71.9,5.4z"/></g></g></svg>');
}

.qasa-gallery-item-icon[data-icon='whatsapp'] {
  background-color: #fff;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24"><path fill="%2325d366"  d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"/></svg>');
}

.qasa-gallery-item-icon[data-icon='copy'] {
  border-radius: 12px;
  background-color: #333;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="white" d="M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z"/></svg>');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

.qasa-gallery-item-icon[data-icon='delete'] {
  margin-left: auto;
  background-color: #efefef;
  background-image: url('data:image/svg+xml,<svg clip-rule="evenodd" width="16" height="16" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23FFFFFF" d="m20.015 6.506h-16v14.423c0 .591.448 1.071 1 1.071h14c.552 0 1-.48 1-1.071 0-3.905 0-14.423 0-14.423zm-5.75 2.494c.414 0 .75.336.75.75v8.5c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-8.5c0-.414.336-.75.75-.75zm-4.5 0c.414 0 .75.336.75.75v8.5c0 .414-.336.75-.75.75s-.75-.336-.75-.75v-8.5c0-.414.336-.75.75-.75zm-.75-5v-1c0-.535.474-1 1-1h4c.526 0 1 .465 1 1v1h5.254c.412 0 .746.335.746.747s-.334.747-.746.747h-16.507c-.413 0-.747-.335-.747-.747s.334-.747.747-.747zm4.5 0v-.5h-3v.5z" fill-rule="nonzero"/></svg>');
  background-position: center center;
  background-repeat: no-repeat;
}

.qasa-gallery-item-icon[data-icon='delete']:hover {
  background-color: red;
}

/* --- LIGHTBOX --- */
.qasa-gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

.qasa-gallery-lightbox.visible {
  visibility: visible;
  opacity: 1;
}

.qasa-gallery-lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 96%;
}

.qasa-gallery-lightbox img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  pointer-events: auto;
  user-drag: none;
  -webkit-user-drag: none;
}

/* --- LIGHTBOX DESCRIPTION --- */
.qasa-gallery-lightbox-desc {
  display: flex;
  position: relative;
  align-items: center;
  gap: 10px;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
}

.qasa-gallery-lightbox-desc a {
  color: white;
}

.qasa-gallery-lightbox-desc.loading::before {
  content: "";
  font-weight: bold;
  font-style: italic;
  width: 100%;
  text-align: center;
  padding: 20px;
}

/* --- LIGHTBOX CONTROLS --- */
.qasa-gallery-lightbox-direction {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: white;
  cursor: pointer;
}

.qasa-gallery-lightbox-next {
  right: 5px;
}

.qasa-gallery-lightbox-previous {
  left: 5px;
}

.qasa-gallery-lightbox-close {
  top: 14px;
  right: 4px;
}

.qasa-gallery-lightbox-position {
  top: 14px;
  left: 4px;
  font-size: 0.8rem;
  width: 60px;
  user-select: none;
  cursor: default;
}

/* --- COPY DIALOG --- */
.qasa-gallery-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.qasa-gallery-dialog-box {
  background: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.qasa-gallery-dialog-box input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
}

.qasa-gallery-dialog-box button {
  margin-top: 10px;
  padding: 8px 12px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.qasa-gallery-dialog-box button:hover {
  background: #0056b3;
}

/* --- RESPONSIVE LAYOUT --- */
@media (max-width: 800px) {
  #qasa-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}