.notejar-embed{
  --notejar-paper: #fdf6e3;
  --notejar-ink: #4a3f35;
  --notejar-accent: #b5654a;
  --notejar-note-color: var(--notejar-paper);
  width:100%;
  max-width:380px;
  aspect-ratio:1/1;
  margin:20px auto;
  position:relative;
  box-sizing:border-box;
  font-family: Georgia, "Noto Serif Hebrew", "David Libre", serif;
  color:var(--notejar-ink);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  direction:rtl;
}
.notejar-embed *{ box-sizing:border-box; }

/*
 * Theme-conflict guards.
 * The inner layout is absolutely positioned, and absolute offsets resolve
 * against the PADDING box - so any padding a theme/page-builder (Elementor,
 * etc.) injects into our container silently pushes the jar and texts down,
 * off-center. Page builders also commonly force `img { height:auto }`,
 * which would break the jar image's height:100% sizing.
 * These rules pin the geometry we depend on. !important is deliberate:
 * builder styles are themselves high-specificity and load after ours.
 */
div.notejar-embed{
  padding:0 !important;
  line-height:normal !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  max-height:none !important;
  float:none !important;
}
.notejar-embed .notejar-photo-img{
  height:100% !important;
  width:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  vertical-align:middle;
}
.notejar-embed .notejar-title,
.notejar-embed .notejar-subtitle,
.notejar-embed .notejar-hint,
.notejar-embed .notejar-limit-status{
  margin:0 !important;
  padding:0 !important;
}

/*
 * Fixed-anchor layout: every element (texts + jar) sits at an absolute,
 * constant position inside the 1:1 square. Showing/hiding or resizing a
 * text NEVER moves the jar or pushes another text out of the frame.
 */
.notejar-title{
  position:absolute;
  top:2.5%; left:0; right:0;
  height:11%;
  font-size:16px;
  color:#6b5744;
  letter-spacing:0.5px;
  z-index:2;
  overflow:visible;
  pointer-events:none;
}
.notejar-subtitle{
  position:absolute;
  top:11.5%; left:0; right:0;
  height:8%;
  font-size:12.5px;
  color:#8a7a63;
  line-height:1.4;
  z-index:2;
  overflow:visible;
  pointer-events:none;
}

.notejar-jar-wrap{
  /* jar is pinned: same spot whether or not any text is visible */
  position:absolute;
  top:17%; bottom:18%;
  left:7%; right:7%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}
.notejar-jar-wrap:hover{ transform: translateY(-2px); }
.notejar-jar-wrap.notejar-shake{ animation: notejarShakeJar .55s ease; }
.notejar-jar-wrap.notejar-disabled{ cursor:default; opacity:0.92; }

@keyframes notejarShakeJar{
  0%{ transform: rotate(0deg); }
  15%{ transform: rotate(-4deg); }
  30%{ transform: rotate(4deg); }
  45%{ transform: rotate(-3deg); }
  60%{ transform: rotate(3deg); }
  75%{ transform: rotate(-1.5deg); }
  100%{ transform: rotate(0deg); }
}

.notejar-photo-wrap{ position:relative; width:100%; height:100%; min-height:0; }
.notejar-photo-img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 12px 16px rgba(60,45,25,0.28));
}
.notejar-sticker{
  position:absolute;
  left:50%; top:80%;
  transform: translate(-50%,-50%);
  padding:5px 14px;
  border-radius:5px;
  font-size:12px;
  white-space:nowrap;
  /* Outer drop shadow + a whisper of inset shading on the side edges,
     so the label reads as wrapping around the jar's curved glass */
  box-shadow:
    inset 5px 0 7px -5px rgba(0,0,0,0.16),
    inset -5px 0 7px -5px rgba(0,0,0,0.16),
    inset 0 -3px 5px -3px rgba(0,0,0,0.07),
    0 3px 8px rgba(0,0,0,0.25);
  max-width:88%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.notejar-note-card{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%,-40%) scale(0.85);
  width:min(78%, 260px);
  background: var(--notejar-note-color);
  background-image:
    linear-gradient(var(--notejar-note-color), var(--notejar-note-color)),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.03) 0, rgba(0,0,0,0.03) 1px, transparent 1px, transparent 26px);
  border-radius: 6px;
  padding: 22px 20px;
  box-shadow: 0 14px 30px rgba(60,40,20,0.28), 0 0 0 1px rgba(0,0,0,0.04);
  opacity:0;
  pointer-events:none;
  transition: opacity .35s ease, transform .35s ease;
  text-align:center;
  font-size:16px;
  line-height:1.6;
  color:#4a3f35;
  /* must sit ABOVE the full-screen backdrop (9990) so the drawn note stays
     bright and highlighted while everything around it dims */
  z-index:9995;
}
.notejar-note-card::before{
  content:"";
  position:absolute;
  top:-10px; left:50%;
  transform: translateX(-50%) rotate(45deg);
  width:18px; height:18px;
  background: var(--notejar-note-accent, var(--notejar-accent));
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* --- note style variants --- */
/* classic (default): pin + faint ruled lines, as defined above */
.notejar-note-card.notejar-style-plain::before{ display:none; }
.notejar-note-card.notejar-style-plain{
  background-image: linear-gradient(var(--notejar-note-color), var(--notejar-note-color));
}
.notejar-note-card.notejar-style-folded::before{ display:none; }
.notejar-note-card.notejar-style-folded{
  border-radius: 4px 4px 4px 0;
  background-image:
    linear-gradient(315deg, rgba(0,0,0,0.10) 0, rgba(0,0,0,0.10) 11px, rgba(255,255,255,0.45) 12px, transparent 13px),
    linear-gradient(var(--notejar-note-color), var(--notejar-note-color));
}
.notejar-note-card.notejar-style-folded::after{
  content:"";
  position:absolute;
  bottom:0; left:0;
  border-style:solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent rgba(0,0,0,0.12) transparent;
}
.notejar-note-card.notejar-show{
  opacity:1;
  pointer-events:auto;
  transform: translate(-50%,-50%) scale(1);
}

/*
 * Entrance animations.
 * Each variant only defines the HIDDEN state; the shared .notejar-show rule
 * above is the shared end state, so the existing transition animates between
 * them. The :not(.notejar-show) guard raises specificity above .notejar-show
 * so these can never leak into the final resting position.
 */
.notejar-note-card.notejar-anim-drop:not(.notejar-show){
  transform: translate(-50%,-190%) scale(1);
}
.notejar-note-card.notejar-anim-drop{
  transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.3,.64,1);
}
.notejar-note-card.notejar-anim-slide:not(.notejar-show){
  transform: translate(90%,-50%) scale(1);
}
.notejar-embed[dir="ltr"] .notejar-note-card.notejar-anim-slide:not(.notejar-show){
  transform: translate(-190%,-50%) scale(1);
}
.notejar-note-card.notejar-anim-grow:not(.notejar-show){
  transform: translate(-50%,-50%) scale(0.2);
}
.notejar-note-card.notejar-anim-spin:not(.notejar-show){
  transform: translate(-50%,-50%) scale(0.4) rotate(-200deg);
}
.notejar-note-card.notejar-anim-spin{
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,.9,.3,1);
}

/* respect users who ask the OS to reduce motion */
@media (prefers-reduced-motion: reduce){
  .notejar-note-card,
  .notejar-note-card.notejar-anim-drop,
  .notejar-note-card.notejar-anim-spin{
    transition: opacity .2s ease !important;
  }
  .notejar-note-card:not(.notejar-show){
    transform: translate(-50%,-50%) scale(1) !important;
  }
  .notejar-jar-wrap.notejar-shake{ animation:none !important; }
}
/* image notes */
.notejar-note-card .notejar-note-img{
  display:block;
  margin:0 auto;
  max-width:100%;
  height:auto;
  /* max-height is set inline per instance, relative to the widget size,
     so a tall image is scaled down instead of overflowing the square */
  object-fit:contain;
  border-radius:4px;
}
/* transparent image note: hide the paper card entirely, show only the image */
.notejar-note-card.notejar-note-transparent{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  padding:10px;
}
.notejar-note-card.notejar-note-transparent::before,
.notejar-note-card.notejar-note-transparent::after{ display:none !important; }
.notejar-note-card.notejar-note-transparent .notejar-note-img{ border-radius:0; }

/* "read more" button on an image note that has extra text.
   Default: sits BELOW the image in normal flow, so it never covers it.
   Optional: overlaid on the bottom of the image (.notejar-pos-over). */
.notejar-note-card .notejar-readmore{
  position:static;
  margin:10px auto 0;
  display:none;
  cursor:pointer;
  font-family:inherit;
  padding:6px 15px;
  max-width:88%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  z-index:6;
  line-height:1.3;
}
.notejar-note-card .notejar-readmore.notejar-show{ display:block; }
.notejar-note-card .notejar-readmore:hover{ filter: brightness(0.94); }
/* overlay variant */
.notejar-note-card .notejar-readmore.notejar-pos-over{
  position:absolute;
  left:50%;
  bottom:10px;
  margin:0;
  transform: translateX(-50%);
}

/* full-text panel that opens over the note card */
.notejar-note-full{
  position:absolute;
  inset:0;
  display:none;
  background: var(--notejar-note-color);
  border-radius:inherit;
  padding:34px 16px 14px;
  overflow-y:auto;
  z-index:7;
  text-align:start;
  font-size:13.5px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
}
.notejar-note-full.notejar-show{ display:block; }
.notejar-note-card.notejar-note-transparent .notejar-note-full{
  background: var(--notejar-note-color);
  box-shadow: 0 14px 30px rgba(60,40,20,0.28);
  border-radius:6px;
}
.notejar-note-back{
  position:absolute;
  top:6px;
  inset-inline-start:8px;
  background:none;
  border:none;
  font-family:inherit;
  font-size:12px;
  color:inherit;
  opacity:0.75;
  cursor:pointer;
  padding:4px 6px;
}
.notejar-note-back:hover{ opacity:1; }

.notejar-note-card .notejar-close-x{
  position:absolute;
  top:6px; left:8px;
  font-size:13px;
  color:#a4917a;
  cursor:pointer;
  padding:4px;
}

.notejar-hint{
  position:absolute;
  bottom:9%; left:0; right:0;
  height:7%;
  font-size:12.5px;
  color:#8a7a63;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  z-index:2;
  pointer-events:none;
}
.notejar-limit-status{
  position:absolute;
  bottom:2.5%; left:0; right:0;
  height:6%;
  font-size:11.5px;
  color:#9a7a5a;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
  z-index:2;
  pointer-events:none;
}
/* inner span carries the actual text; positioned horizontally by posPct */
.notejar-textline{
  position:absolute;
  top:0;
  transform: translateX(-50%);
  white-space:nowrap;
  max-width:94%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.notejar-backdrop{
  position:fixed; inset:0;
  background: rgba(40,30,20,0.15);
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease;
  z-index:9990;
}
.notejar-backdrop.notejar-show{ opacity:1; pointer-events:auto; }