/*
Theme Name: Listivo Child
Theme URI: https://listivotheme.com/
Author: TangibleDesign
Author URI: https://tangibledesign.net/
Description: Listivo
Template: listivo
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: translation-ready
Text Domain: listivo
*/




/* Mobile-friendly file input: clickable tile */
.listivo-file-tile {
  position: relative;
  display: block;
  border: 2px dashed #c8cad0;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  min-height: 120px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.listivo-file-tile:focus,
.listivo-file-tile:hover {
  border-color: #9aa0a6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.listivo-file-tile .file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.listivo-file-tile .preview img,
.listivo-panel-user-image__image img { max-width:100%; max-height:200px; display:block; margin:0 auto; }
.listivo-file-tile .upload-status,
.listivo-panel-user-image .upload-status {
  margin-top: 8px;
  font-size: .95rem;
}

/* Placeholder visuals */
.listivo-panel-user-image__image--placeholder .placeholder-text {
  color: #666;
  font-size: 1rem;
  line-height: 1.3;
}

/* Delete button */
.listivo-panel-user-image__close {
  margin-top: 8px;
  background: #f44336;
  color: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.listivo-panel-user-image__close:hover { opacity: 0.95; }

/* Status badges */
.lv-status { font-weight: 700; margin-bottom: 8px; }
.lv-status--approved { color: green; }
.lv-status--pending { color: #ff9800; }
.lv-status--rejected { color: red; }

/* Responsive: tiles stack on small screens */
@media (max-width: 780px) {
  .identity-tiles { flex-direction: column; }
  .listivo-file-tile { min-height: 140px; padding: 12px; }
  .listivo-panel-user-image__close { width: 100%; }
}

/* Accessibility: focus outline */
.listivo-file-tile:focus { outline: 3px solid rgba(0,123,255,0.12); outline-offset: 2px; }

/* Small screens adjustments */
@media (max-width: 420px) {
  .listivo-file-tile { padding: 10px; min-height: 120px; }
  .listivo-panel-user-image__image img { max-height: 180px; }
}