/* Folkets favoritt – "Lag delingsbilde" (share.js). Builds on .app-modal / .app-modal-card in app.css. */

.ff-res-share { font: inherit; font-weight: 600; font-size: 14px; border-radius: 999px; padding: 10px 16px; cursor: pointer; border: 1.5px solid #ea412a; background: #ea412a; color: #fff; }
.ff-res-share:hover { background: #d23620; border-color: #d23620; }
.ff-res-share:focus-visible { outline: 2px solid #472449; outline-offset: 2px; }

html.ff-share-lock { overflow: hidden; }

.ff-share { overflow-y: auto; align-items: start; }
.ff-share .ff-share-card { width: min(460px, 100%); margin: auto 0; padding: 20px; gap: 14px; box-sizing: border-box; min-width: 0; }
.ff-share-card:focus { outline: none; }

.ff-share-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ff-share-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid #baadbb; background: #fff; color: #472449; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.ff-share-x:hover { background: #f6eef5; }

.ff-share-stage { display: grid; place-items: center; background: #f6eef5; border-radius: 14px; padding: 12px; min-width: 0; }
.ff-share-canvas { display: block; max-width: 100%; height: auto; max-height: 52vh; width: auto; border-radius: 8px; box-shadow: 0 6px 18px #47244926; }
/* reserve the right aspect ratio before the first paint so the modal does not jump */
.ff-share-stage[data-format="post"] .ff-share-canvas { aspect-ratio: 1080 / 1350; }
.ff-share-stage[data-format="story"] .ff-share-canvas { aspect-ratio: 1080 / 1920; }

.ff-share-ctrls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.ff-share-seg { display: inline-flex; background: #f6eef5; border-radius: 999px; padding: 4px; gap: 2px; max-width: 100%; }
.ff-share-segbtn { font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 999px; padding: 8px 12px; background: transparent; color: #472449; cursor: pointer; white-space: nowrap; }
.ff-share-segbtn.is-on { background: #472449; color: #fff; }
.ff-share-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #472449; cursor: pointer; }
.ff-share-chk input { width: 18px; height: 18px; accent-color: #ea412a; margin: 0; }

.ff-share .ff-share-btns { flex-wrap: wrap; }
.ff-share .ff-share-btns .ff-share-dl { background: #ea412a; border-color: #ea412a; color: #fff; }
.ff-share .ff-share-btns .ff-share-dl:hover:not(:disabled) { background: #d23620; border-color: #d23620; }
.ff-share .ff-share-btns button[hidden] { display: none; }

.ff-share-x:focus-visible, .ff-share-segbtn:focus-visible, .ff-share-chk input:focus-visible, .ff-share-btns button:focus-visible { outline: 2px solid #ea412a; outline-offset: 2px; }

@media (max-width: 420px) {
  .ff-share { padding: 10px; }
  .ff-share .ff-share-card { padding: 16px; gap: 12px; }
  .ff-share-canvas { max-height: 46vh; }
  .ff-share .ff-share-btns button { flex: 1; }
}