/**
 * TopViet Core - Public CSS
 * Bổ sung cho theme CSS, dành cho các widget/shortcode/block hiển thị
 */

/* Modal rating */
.tv-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.tv-modal-overlay.is-open { display: flex; }
.tv-modal {
  background: #fff; border-radius: 16px;
  max-width: 520px; width: 100%; padding: 28px;
  box-shadow: 0 24px 64px rgba(0,0,0,.2);
  max-height: 90vh; overflow-y: auto;
}
.tv-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tv-modal-header h2 { margin: 0; font-size: 18px; }
.tv-modal-close { border: none; background: none; font-size: 24px; cursor: pointer; color: #718096; }

.tv-rating-input-big {
  display: flex; gap: 8px; font-size: 36px; color: #CBD5E0;
  justify-content: center; margin: 20px 0;
}
.tv-rating-input-big span { cursor: pointer; transition: transform .2s; }
.tv-rating-input-big span:hover { transform: scale(1.15); }
.tv-rating-input-big span.active { color: #F6AD55; }

.tv-modal textarea {
  width: 100%; border: 1px solid #E2E8F0; border-radius: 8px;
  padding: 12px; font-family: inherit; font-size: 14px;
  min-height: 100px; resize: vertical;
}

/* Sub-ratings (cleanliness, service...) */
.tv-sub-ratings { margin: 16px 0; }
.tv-sub-rating-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid #F7FAFC;
}
.tv-sub-rating-row label { font-size: 14px; font-weight: 500; }
.tv-sub-rating-row .tv-rating-input { font-size: 18px; }

/* Toast notification */
.tv-toast {
  position: fixed; bottom: 20px; right: 20px;
  padding: 12px 20px; border-radius: 8px;
  background: #1A202C; color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  font-size: 14px; font-weight: 500;
  transform: translateY(120%);
  transition: transform .3s ease;
  z-index: 99999;
}
.tv-toast.show { transform: translateY(0); }
.tv-toast.success { background: #38A169; }
.tv-toast.error { background: #E53E3E; }

/* Favorite button animated */
[data-tv-favorite] {
  transition: transform .2s;
}
[data-tv-favorite].is-favorited {
  color: #E53E3E;
  animation: tv-pop .4s ease;
}
@keyframes tv-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Loading spinner */
.tv-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid #E2E8F0; border-top-color: #E53E3E;
  border-radius: 50%; animation: tv-spin .8s linear infinite;
}
@keyframes tv-spin { to { transform: rotate(360deg); } }

/* Map iframe wrapper */
.tv-map-wrap {
  position: relative; padding-top: 56.25%;
  border-radius: 10px; overflow: hidden;
}
.tv-map-wrap iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* Profile badge wall */
.tv-badge-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 16px; padding: 16px;
}
.tv-badge-tile {
  text-align: center; padding: 16px;
  background: #F7FAFC; border-radius: 12px;
  border: 1px solid #E2E8F0;
}
.tv-badge-tile .icon { font-size: 36px; }
.tv-badge-tile .name { font-weight: 600; font-size: 13px; margin-top: 6px; }
.tv-badge-tile.locked { opacity: .4; filter: grayscale(1); }

/* Level progress bar */
.tv-level-progress {
  height: 8px; background: #E2E8F0; border-radius: 4px;
  overflow: hidden; margin: 8px 0;
}
.tv-level-progress-fill {
  height: 100%; background: linear-gradient(90deg, #FBB040, #E53E3E);
  border-radius: 4px; transition: width .4s ease;
}