/* ============================================
   MOBILE MODALS OPTIMIZATION
   Fullscreen modals с swipe-to-close
   ============================================ */

@media (max-width: 768px) {

/* Modal Backdrop */
.modal-backdrop {
  backdrop-filter: blur(8px) !important;
}

/* Modal Dialog - Fullscreen on mobile */
.modal-dialog {
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
}

/* Modal Content */
.modal-content {
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Modal Header - Sticky */
.modal-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
  background: white !important;
  border-bottom: 1px solid #e9ecef !important;
  padding: 16px 20px !important;
  min-height: var(--mobile-header-height) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.modal-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  flex: 1 !important;
}

/* Close Button - Larger touch target */
.btn-close,
.modal-header .btn-close {
  width: var(--mobile-touch-target) !important;
  height: var(--mobile-touch-target) !important;
  padding: 12px !important;
  margin: 0 !important;
  opacity: 0.6 !important;
}

/* Modal Body */
.modal-body {
  padding: 20px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
}

/* Modal Footer - Sticky */
.modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: white !important;
  border-top: 1px solid #e9ecef !important;
  padding: 16px 20px !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05) !important;
  gap: 12px !important;
}

.modal-footer .btn {
  flex: 1 !important;
  min-height: 48px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
}

/* Publication Detail Modal */
#publicationDetailModal .modal-post-content {
  font-size: 15px !important;
  line-height: 1.6 !important;
  padding: 16px 0 !important;
}

#publicationDetailModal .modal-post-image {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  margin: 16px 0 !important;
}

/* Link Preview in Modal */
.website-preview-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 16px 0 !important;
}

.website-preview-image {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
}

.website-preview-content {
  padding: 16px !important;
}

/* Post Stats */
.modal-post-stats {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #e9ecef !important;
  border-bottom: 1px solid #e9ecef !important;
  margin: 16px 0 !important;
}

.stat-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  color: #6c757d !important;
}

/* Post Actions */
.modal-post-actions {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 16px 0 !important;
}

.modal-action-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 12px !important;
  border: none !important;
  background: #f8f9fa !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  color: #495057 !important;
  min-height: 70px !important;
  transition: all 0.2s ease !important;
}

.modal-action-btn i {
  font-size: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.modal-action-btn:active {
  background: #e9ecef !important;
  transform: scale(0.95) !important;
}

.modal-action-btn.active {
  background: #19861C !important;
  color: white !important;
}

/* Comments Section in Modal */
.modal-comments-section {
  margin-top: 24px !important;
}

.comments-header {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e9ecef !important;
}

/* Comment Composer */
.comment-composer {
  position: sticky !important;
  bottom: 0 !important;
  background: white !important;
  padding: 12px 16px !important;
  border-top: 1px solid #e9ecef !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05) !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

.comment-input {
  flex: 1 !important;
  padding: 12px 16px !important;
  border: 1px solid #e9ecef !important;
  border-radius: 24px !important;
  font-size: 15px !important;
  background: #f8f9fa !important;
  resize: none !important;
  max-height: 100px !important;
}

.comment-send-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #19861C !important;
  color: white !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  padding: 0 !important;
}

.comment-send-btn:disabled {
  background: #e9ecef !important;
  color: #adb5bd !important;
}

/* Login Modal - Mobile Optimized */
#loginModal .modal-dialog {
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#loginModal .modal-content {
  border-radius: 0 !important;
  height: 100% !important;
  max-height: 100vh !important;
}

/* Променяме layout-а на login modal от хоризонтален на вертикален */
#loginModal .login-modal-content {
  flex-direction: column !important;
  min-height: 100vh !important;
  height: 100% !important;
}

/* Скриваме или намаляваме снимката на мобилна версия */
#loginModal .modal-left {
  display: none !important; /* Скриваме снимката за повече място */
}

/* Алтернативно: показваме снимката, но много малка */
/*
#loginModal .modal-left {
  flex: 0 0 120px !important;
  min-height: 120px !important;
  max-height: 120px !important;
}

#loginModal .modal-left img {
  height: 100% !important;
  object-fit: cover !important;
}
*/

/* Дясната част (формата) да заема цялото пространство */
#loginModal .modal-right {
  flex: 1 !important;
  padding: 20px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Header на модала */
#loginModal .modal-header {
  position: sticky !important;
  top: 0 !important;
  background: white !important;
  z-index: 10 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #e9ecef !important;
  margin: 0 !important;
}

#loginModal .modal-title {
  font-size: 18px !important;
  margin-left: 0 !important;
  text-align: left !important;
  letter-spacing: 0.5px !important;
}

#loginModal .btn-close {
  width: var(--mobile-touch-target, 44px) !important;
  height: var(--mobile-touch-target, 44px) !important;
  padding: 12px !important;
  margin: 0 !important;
}

/* Body на модала */
#loginModal .modal-body {
  padding: 24px 20px !important;
  flex: 1 !important;
  overflow-y: visible !important;
}

/* Input полета */
#loginModal input,
#loginModal .form-control {
  padding: 14px 16px !important;
  font-size: 16px !important;
  border-radius: 12px !important;
  min-height: 50px !important;
}

#loginModal .form-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

#loginModal .mb-3 {
  margin-bottom: 20px !important;
}

/* Checkbox и линкове */
#loginModal .d-flex.justify-content-between {
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* Form Check контейнер */
#loginModal .form-check {
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-left: 0 !important;
  min-height: 44px !important;
}

/* Checkbox input - по-голям за мобилна версия */
#loginModal .form-check-input {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  border: 2px solid #198754 !important;
  border-radius: 6px !important;
}

#loginModal .form-check-input:checked {
  background-color: #4b9f3e !important;
  border-color: #4b9f3e !important;
}

#loginModal .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25) !important;
  border-color: #4b9f3e !important;
}

/* Checkbox label - подравнен и с по-голям font */
#loginModal .form-check-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  line-height: 1.5 !important;
}

/* Линкове */
#loginModal .small {
  font-size: 15px !important;
  display: block !important;
  margin-bottom: 4px !important;
  padding: 8px 0 !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* Footer на модала */
#loginModal .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: white !important;
  padding: 16px 20px !important;
  border-top: 1px solid #e9ecef !important;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05) !important;
  margin: 0 !important;
}

#loginModal .modal-footer .btn {
  padding: 14px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  min-height: 50px !important;
  width: 100% !important;
}

/* Signal Modal */
#signalModal .signal-image {
  width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Create Modals (Publication, Event, etc.) */
.create-modal .form-group {
  margin-bottom: 20px !important;
}

.create-modal label {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.create-modal textarea {
  min-height: 120px !important;
}

/* Image Preview in Create Modal */
.image-preview-container {
  position: relative !important;
  margin-top: 12px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.image-preview {
  width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: cover !important;
}

.remove-image-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.7) !important;
  color: white !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Swipe Indicator (for fullscreen modals) */
.modal-swipe-indicator {
  width: 40px !important;
  height: 4px !important;
  background: #dee2e6 !important;
  border-radius: 2px !important;
  margin: 8px auto !important;
}


} /* End of @media (max-width: 768px) */