/**
 * Hobbiz unified modal chrome — matches community .ch-modal.
 * Overlay blur/backdrop + close button. Does not rewrite modal body layouts.
 */
:root {
  --hz-modal-backdrop: rgba(45, 55, 72, 0.72);
  --hz-modal-blur: blur(4px);
  --hz-modal-close-size: 2.25rem;
  --hz-modal-radius: 1.15rem;
  --hz-modal-border: var(--border-color, #D1C4E9);
  --hz-modal-muted: var(--muted-foreground, #6b7280);
  --hz-modal-primary: var(--primary-color, #794ff8);
  --hz-modal-primary-soft: var(--primary-color-light, rgba(121, 79, 248, 0.1));
}

/* Unified dimmed backdrop (exclude intentional dark galleries) */
.modal-overlay,
.post-filter-modal,
.custom-modal,
.custom-dialog-overlay,
.delete-confirmation,
.delete-confirm-modal,
.access-blocked-overlay,
.subscription-modal,
#repostmodalparent,
#likesmodalparent,
#hobbyModal.modal,
#hobbiesModal.modal,
#order-modal,
#contact-modal,
.task-chat-modal,
.coach-modal-overlay,
#payment-modal,
#cancel-modal,
#teacherModal.modal-overlay,
#authRequiredModal,
#filterModal,
#postFilterModal,
#addPortfolioModal,
#editStatsModal,
#editPortfolioModal,
#deadlineEditModal,
#goalsEditModal,
#deleteGoalModal,
#diaryModal,
#planModal {
  background: var(--hz-modal-backdrop) !important;
  backdrop-filter: var(--hz-modal-blur) !important;
  -webkit-backdrop-filter: var(--hz-modal-blur) !important;
}

/* Keep photo / crop / attach viewers dark (intentional) */
#allmessageattachments,
#newsphotosmodal,
#avatarphotosmodalparent,
#cropheadermodalparent,
.photo-slider-overlay,
.hz-modal-gallery {
  /* do not force purple-grey glass here */
}

/* Unified close control */
.ch-modal-close,
.modal-close,
.modal-close-btn,
.close-btn.ch-modal-close,
.custom-modal-close,
.comments-close-btn.ch-modal-close,
.subscription-close-btn,
.custom-dialog-close,
#closerepostmodal,
#closeLikesModal,
#modalClose,
#btnCloseTaskChat,
#closePostModal,
button.close.ch-modal-close {
  width: var(--hz-modal-close-size) !important;
  height: var(--hz-modal-close-size) !important;
  min-width: var(--hz-modal-close-size);
  min-height: var(--hz-modal-close-size);
  padding: 0 !important;
  margin: 0;
  border-radius: 0.75rem !important;
  border: 1px solid var(--hz-modal-border) !important;
  background: #fff !important;
  color: var(--hz-modal-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1 !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.ch-modal-close:hover,
.modal-close:hover,
.modal-close-btn:hover,
.close-btn.ch-modal-close:hover,
.custom-modal-close:hover,
.comments-close-btn.ch-modal-close:hover,
.subscription-close-btn:hover,
.custom-dialog-close:hover,
#closerepostmodal:hover,
#closeLikesModal:hover,
#modalClose:hover,
#btnCloseTaskChat:hover,
#closePostModal:hover,
button.close.ch-modal-close:hover {
  background: var(--hz-modal-primary-soft) !important;
  color: var(--hz-modal-primary) !important;
  transform: none !important;
}

.ch-modal-close i,
.modal-close i,
.modal-close-btn i,
.close-btn.ch-modal-close i,
.custom-modal-close i,
.subscription-close-btn i,
#closerepostmodal i,
#closeLikesModal i,
#modalClose i,
#btnCloseTaskChat i,
#closePostModal i {
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
}

/* Empty CSS-X close (repost) becomes real button host */
#closerepostmodal::before,
#closerepostmodal::after {
  content: none !important;
  display: none !important;
}

/* Dialog cards — soft radius/shadow when they use common shells */
.ch-modal-card,
.custom-dialog,
.subscription-modal .modal-content,
#repostmodal,
.custom-modal .custom-modal-content,
.post-filter-modal .modal-content,
.filter-modal .modal-content {
  border-radius: var(--hz-modal-radius);
}

/* Delete-messages confirm (messenger) — match .ch-modal body/actions */
.custom-dialog.ch-modal-card {
  width: min(420px, 100%);
  max-width: 100%;
  border: 1px solid var(--hz-modal-border);
  box-shadow:
    0 28px 72px rgba(74, 20, 140, 0.22),
    0 8px 24px rgba(45, 55, 72, 0.12);
  overflow: hidden;
}

.custom-dialog .custom-dialog-header.ch-modal-head {
  background: linear-gradient(180deg, #fbf8ff 0%, #fff 100%);
  border-bottom: 1px solid var(--hz-modal-border, #eee);
  color: inherit;
}

.delete-confirmation .modal-header.ch-modal-head {
  background: linear-gradient(180deg, #fbf8ff 0%, #fff 100%);
  border-bottom: 1px solid var(--hz-modal-border, #eee);
}

.delete-confirmation .modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-heading, Montserrat, sans-serif);
  color: var(--foreground, #1a1a1a);
}

.custom-dialog .custom-dialog-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-heading, Montserrat, sans-serif);
  color: var(--foreground, #1a1a1a);
  text-shadow: none;
}

.custom-dialog .custom-dialog-content.ch-modal-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--foreground, #1a1a1a);
}

.custom-dialog .delete-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  background: var(--color-background-input, #f6f6f6);
  border: 1px solid var(--hz-modal-border, #e9ecef);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}

.custom-dialog .delete-option:hover {
  background: var(--hz-modal-primary-soft, rgba(121, 79, 248, 0.1));
  border-color: var(--hz-modal-primary, #794ff8);
}

.custom-dialog .delete-option input[type="checkbox"] {
  margin: 0;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--hz-modal-primary, #794ff8);
  cursor: pointer;
  flex-shrink: 0;
}

.custom-dialog .delete-option span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--foreground, #1a1a1a);
  line-height: 1.4;
}

.custom-dialog .ch-modal-actions .btn,
.delete-confirmation .ch-modal-actions .btn {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-heading, Montserrat, sans-serif);
  min-height: 44px;
  min-width: 7.5rem;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog .ch-modal-actions .btn-outline-secondary,
.delete-confirmation .ch-modal-actions .btn-outline-secondary {
  background: #fff;
  border: 1.5px solid #e7e2f7;
  color: #1c0a47;
}

.custom-dialog .ch-modal-actions .btn-outline-secondary:hover,
.delete-confirmation .ch-modal-actions .btn-outline-secondary:hover {
  background: #f5f2ff;
  border-color: var(--hz-modal-primary, #7f58ff);
  color: #1c0a47;
}

.custom-dialog .ch-modal-actions .btn-danger,
.delete-confirmation .ch-modal-actions .btn-danger,
.custom-dialog .delete-button,
.delete-confirmation .confirm-delete {
  background: #dc2626;
  border: 1.5px solid transparent;
  color: #fff;
}

.custom-dialog .ch-modal-actions .btn-danger:hover,
.delete-confirmation .ch-modal-actions .btn-danger:hover,
.custom-dialog .delete-button:hover,
.delete-confirmation .confirm-delete:hover {
  background: #b91c1c;
  border-color: transparent;
  color: #fff;
}

@media (max-width: 480px) {
  .custom-dialog .ch-modal-actions,
  .delete-confirmation .ch-modal-actions {
    flex-direction: column-reverse;
  }

  .custom-dialog .ch-modal-actions .btn,
  .delete-confirmation .ch-modal-actions .btn {
    width: 100%;
  }
}

/* Chatbot / profile / freelance-admin confirms using ch-modal chrome */
.delete-confirm-modal.ch-modal,
.access-blocked-overlay.ch-modal,
#confirmDeleteAvatarModal.ch-modal,
#resolve-dispute-modal.ch-modal {
  z-index: 1000000000 !important;
}

.delete-confirm-modal .delete-confirm-content.ch-modal-card,
.access-blocked-overlay .access-blocked-content.ch-modal-card,
#confirmDeleteAvatarModal .custom-modal-content.ch-modal-card,
#resolve-dispute-modal .resolve-dispute-modal-panel.ch-modal-card {
  width: min(420px, 100%);
  max-width: 100%;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

#resolve-dispute-modal .resolve-dispute-modal-panel.ch-modal-card {
  width: min(600px, 100%);
}

.delete-confirm-modal .ch-modal-body,
.access-blocked-overlay .ch-modal-body,
#confirmDeleteAvatarModal .ch-modal-body,
#resolve-dispute-modal .ch-modal-body {
  text-align: left;
}

.delete-confirm-modal .delete-confirm-message,
.access-blocked-overlay .access-blocked-message,
#confirmDeleteAvatarModal .ch-modal-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--foreground, #1a1a1a);
}

.access-blocked-overlay .ch-modal-actions .subscription-button,
.delete-confirm-modal .ch-modal-actions .btn,
#confirmDeleteAvatarModal .ch-modal-actions .btn,
#resolve-dispute-modal .ch-modal-actions .dispute-btn {
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-heading, Montserrat, sans-serif);
  min-height: 44px;
  min-width: 7.5rem;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
}

.delete-confirm-modal .ch-modal-actions .btn-outline-secondary,
.delete-confirm-modal .delete-confirm-btn.cancel,
#confirmDeleteAvatarModal .ch-modal-actions .btn-outline-secondary,
#confirmDeleteAvatarModal .cancel-btn,
#resolve-dispute-modal .ch-modal-actions .dispute-btn.secondary {
  background: #fff;
  border: 1.5px solid #e7e2f7;
  color: #1c0a47;
}

.delete-confirm-modal .ch-modal-actions .btn-danger,
.delete-confirm-modal .delete-confirm-btn.confirm,
#confirmDeleteAvatarModal .ch-modal-actions .btn-danger,
#confirmDeleteAvatarModal .delete-btn {
  background: #dc2626;
  border: 1.5px solid transparent;
  color: #fff;
}

.access-blocked-overlay .ch-modal-actions .subscription-button,
#resolve-dispute-modal .ch-modal-actions .dispute-btn.primary {
  background: var(--hz-modal-primary, #794ff8);
  border: 1.5px solid transparent;
  color: #fff !important;
}

@media (max-width: 480px) {
  .delete-confirm-modal .ch-modal-actions,
  .access-blocked-overlay .ch-modal-actions,
  #confirmDeleteAvatarModal .ch-modal-actions,
  #resolve-dispute-modal .ch-modal-actions {
    flex-direction: column-reverse;
  }

  .delete-confirm-modal .ch-modal-actions .btn,
  .delete-confirm-modal .delete-confirm-btn,
  .access-blocked-overlay .ch-modal-actions .subscription-button,
  #confirmDeleteAvatarModal .ch-modal-actions .btn,
  #resolve-dispute-modal .ch-modal-actions .dispute-btn {
    width: 100%;
  }
}

/* Mobile bottom-sheet for compact dialogs only (not fullscreen messenger shells) */
@media (max-width: 800px) {
  .hz-modal-sheet.modal-overlay,
  .hz-modal-sheet.post-filter-modal,
  #filterModal.modal-overlay,
  #postFilterModal.post-filter-modal,
  #authRequiredModal.modal-overlay,
  #addPortfolioModal.modal-overlay,
  #editStatsModal.modal-overlay,
  #editPortfolioModal.modal-overlay,
  #deadlineEditModal.modal-overlay,
  #payment-modal.subscription-modal,
  #cancel-modal.subscription-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .hz-modal-sheet.modal-overlay > .modal,
  .hz-modal-sheet.modal-overlay > .ch-modal-card,
  #filterModal .ch-modal-card,
  #postFilterModal .ch-modal-card,
  #authRequiredModal .modal,
  #authRequiredModal .ch-modal-card,
  #addPortfolioModal .modal,
  #editStatsModal .modal,
  #editPortfolioModal .modal,
  #deadlineEditModal .modal,
  #payment-modal .modal-content,
  #cancel-modal .modal-content {
    border-radius: 1.15rem 1.15rem 0 0 !important;
    max-height: min(92vh, 920px);
    width: 100% !important;
  }
}