/* ============================
   EDIT PAGE => MATCH ADD PAGE MODAL LOOK
   Put this at the BOTTOM of /assets/css/edit_page.css
   ============================ */

/* Backdrop: match add/edit post backdrop */
.ep-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}

/* Modal wrapper: we don’t need a flex-centered full-screen shell */
.ep-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* Card: make it behave like #add-post-modal / #edit-post-modal */
.ep-card{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 500px;
  background: var(--bg-surface); /* same theme var */
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;

  /* match modal show styles */
  padding: 7px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  overflow-y: visible;
  scrollbar-width: thin;
  border: none; /* add-page modal uses none */
}

/* Header/Footer layout: match add/edit post header/footer */
.ep-header{
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: none; /* add-post header has no border line */
}

.ep-title{
  /* same as your edit post title pill style if you want */
  padding: 0px 12px;
  background: var(--bg-surface);
  border-radius: 99px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  height: 38px;
  width: max-content;
  font-weight: 600;
  letter-spacing: 0;
}

/* Close button: match add/edit close */
.ep-x{
  margin-left: auto;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0;
  height: max-content;
  font-family: fangsong;
  background: none;
  border: none;
  line-height: 1;
}

/* Body padding: match add/edit post body */
.ep-body{
  padding: 2px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sections: mimic your ap-section theme */
.ep-section{
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

/* Rows same spacing as ap-row */
.ep-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.ep-row:last-child{ margin-bottom: 0; }

.ep-row > label{
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

/* Inputs/textarea/select: match add page */
.ep-row input[type="text"],
.ep-row input[type="url"],
.ep-row input[type="number"],
.ep-row input[type="date"],
.ep-row textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-surface);
  color: inherit;
  outline: 1px solid var(--text-muted);
  box-sizing: border-box;
  font-size: 14px;
}

/* Focus: same as add page */
.ep-row input:focus,
.ep-row textarea:focus{
  outline: 1px solid var(--text-primary);
}

/* Textarea sizing */
.ep-row textarea{
  min-height: 90px;
  resize: vertical;
}

/* Select: reuse your add-page select styling */
.ep-row select{
  width: 100%;
  padding: 12px 40px 12px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--bg-surface);
  color: inherit;
  outline: 1px solid var(--text-muted);
  box-sizing: border-box;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    100% 0;
  background-size:
    6px 6px,
    6px 6px,
    2.5em 2.5em;
  background-repeat: no-repeat;
}
.ep-row select:focus{ outline: 1px solid var(--text-primary); }
.ep-row select:disabled{ opacity: 0.55; cursor: not-allowed; }

/* Checkbox row: match your add-page checkbox behavior */
.ep-row:has(input[type="checkbox"]){
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ep-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #ffffff;
}

/* Uploader previews: make them look like your add-page banner/profile preview */
.ep-preview{
  display: flex;
  width: 100%;
  max-height: 100px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: none;
}
.ep-preview img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Avatar preview: match add-page profile preview */
.ep-preview-avatar{
  max-height: none;
}
.ep-preview-avatar img{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

/* Footer: match add-page footer button full-width primary */
.ep-footer{
  position: static; /* add-page footer isn’t sticky */
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-top: none;
  background: transparent;
}

/* Buttons: use same .btn look as add/edit post modal */
.ep-btn{
  padding: 0px 12px;
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  cursor: pointer;
  border-radius: 99px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  height: 38px;
  width: max-content;
  font-weight: 600;
}
.ep-btn-primary{
  width: 100%;
  background: var(--text-primary);
  color: var(--bg-surface);
  border: 1px solid var(--text-primary);
  border-radius: 8px;
  padding: 9px 16px 8px;
}
.ep-btn:disabled{ opacity: 0.6; cursor: not-allowed; }

/* Error style can stay, but match spacing */
.ep-error{
  margin: 0 14px 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

/* visible by default */
.ep-backdrop{ display:block; }
.ep-modal{ display:block; }

/* hidden state controls visibility (matches your HTML/JS) */
.ep-backdrop.hidden,
.ep-modal.hidden{
  display:none !important;
}

/* when modal is visible, card should be visible too */
.ep-modal:not(.hidden) .ep-card{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}