/* text-edit.css — in-context text edit mode (admin-only). Namespaced ae-te-*. */
/* Mirrors photo-edit.css structure. FAB is stacked ABOVE the photo-edit FAB
   (which sits at bottom:20px right:20px) so the two never collide. */
.ae-te-fab {
  position: fixed; right: 20px; bottom: 64px; z-index: 99999;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  color: #FAF8F4; background: #2E3D30; border: none; padding: 13px 18px;
  box-shadow: 0 8px 30px rgba(31,42,32,0.35); transition: opacity .18s;
}
.ae-te-fab:hover { opacity: .9; }
.ae-te-fab--on { background: #A0584D; }
.ae-te-fab svg { width: 15px; height: 15px; }

/* Editable element affordance (only while edit mode is ON) */
.ae-te-editable { cursor: pointer; outline: 2px dashed rgba(46,61,48,.45); outline-offset: 2px; transition: outline-color .15s; }
.ae-te-editable:hover { outline-color: #A0584D; outline-width: 3px; }

/* Key tooltip on hover — shows the i18n key so the admin knows what they're editing */
.ae-te-keytip {
  position: fixed; z-index: 99998; max-width: 360px;
  background: #1F2A20; color: #FAF8F4; font-family: 'Geist', 'Montserrat', monospace;
  font-size: 10px; letter-spacing: 1px; padding: 5px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); pointer-events: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Edit modal */
.ae-te-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; }
.ae-te-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.ae-te-modal__panel {
  position: relative; background: #FFFFFF; border: 1px solid #DCDCDA; width: 92%; max-width: 600px;
  max-height: 90vh; overflow: auto; box-shadow: 0 24px 80px rgba(0,0,0,.18);
}
.ae-te-modal__head { padding: 24px 28px 18px; border-bottom: 1px solid #DCDCDA; background: #FAFAF8; }
.ae-te-modal__crumb { display: block; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: #888; margin-bottom: 6px; word-break: break-all; }
.ae-te-modal__title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 400; color: #2E3D30; margin: 0; }
.ae-te-modal__lang { display: inline-block; margin-left: 8px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #A0584D; }
.ae-te-modal__body { padding: 22px 28px; }
.ae-te-modal__textarea {
  width: 100%; min-height: 100px; font-family: 'Geist', 'Montserrat', sans-serif; font-size: 14px;
  line-height: 1.6; color: #1A1B1A; border: 1px solid #DCDCDA; padding: 12px 14px;
  resize: vertical; background: #FAFAF8;
}
.ae-te-modal__textarea:focus { outline: none; border-color: #2E3D30; }
.ae-te-modal__hint { font-size: 11px; color: #888; margin: 8px 0 0; line-height: 1.5; }
.ae-te-modal__check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: #3A3D38; cursor: pointer; }
.ae-te-modal__check input { margin: 0; }
.ae-te-modal__foot { display: flex; gap: 12px; justify-content: flex-end; align-items: center; padding: 18px 28px 22px; border-top: 1px solid #ECECEA; }
.ae-te-modal__restore { font-size: 11px; color: #A0584D; cursor: pointer; background: none; border: none; text-decoration: underline; margin-right: auto; font-family: inherit; }
.ae-te-modal__restore:hover { color: #8a4838; }
.ae-te-btn { font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; padding: 12px 22px; border: 1.5px solid #2E3D30; }
.ae-te-btn--ghost { background: transparent; color: #2E3D30; }
.ae-te-btn--solid { background: #2E3D30; color: #FAF8F4; }
.ae-te-btn[disabled] { opacity: .5; cursor: default; }

/* Toast */
.ae-te-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100001;
  background: #2E3D30; color: #FAF8F4; font-family: 'Raleway', 'Montserrat', sans-serif; font-size: 11px; letter-spacing: 1px;
  padding: 12px 20px; box-shadow: 0 8px 30px rgba(31,42,32,.35); }
.ae-te-toast--err { background: #A0584D; }