/* The member's photo (Domain\FotoSoci): round wherever it shows, the initials where there is none.
   Management app (.gx): the record's header, the list, the change popup; members' app (.ma): the top bar and «La tua
   foto» in the profile; the entrance tablet (.vx): the photo above the name, the result's icon as a badge on it. */

/* every round avatar can be a photo */
img.db-avatar, .gx img.db-avatar { object-fit: cover; padding: 0; background: var(--brand-primary-soft) }

/* the record's header: the photo opens the change popup (owner and reception) */
.gx .sc-avatar { width: 64px; height: 64px; font-size: 20px }
.gx .sc-foto-tap { position: relative; flex: none; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer }
.gx .sc-foto-tap:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 3px }
.gx .sc-foto-ico { position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: 0 0 0 3px var(--bg, #f5f6f8) }
.gx .sc-foto-ico svg { width: 15px; height: 15px }
.gx .sc-media { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 !important }
.gx .sc-media:empty { display: none }
.gx .sc-media .btn { display: inline-flex; align-items: center; gap: 7px }
@media (max-width: 560px) { .gx .sc-head .sc-id { align-items: flex-start } }

/* the change popup, in both apps */
.foto-pop { text-align: center }
.foto-pop h3 { text-align: left }
.foto-big { width: 160px; height: 160px; margin: 6px auto 12px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--brand-primary-soft, #eef1f4); color: var(--brand-primary); font: 700 48px/1 'Oswald', sans-serif; box-shadow: 0 0 0 4px var(--brand-accent, #fff) }
.foto-big img { width: 100%; height: 100%; object-fit: cover; display: block }
.foto-lead { text-align: left; color: var(--ink-2, #4a5160); font-size: 14.5px; line-height: 1.5 }
.foto-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.foto-btns label { flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; margin: 0 }
.foto-btns label:focus-within { outline: 3px solid color-mix(in srgb, var(--brand-primary) 55%, white); outline-offset: 2px }
.foto-msg { min-height: 1.4em; margin: 10px 0 0 !important; font-size: 14px; text-align: left; color: var(--ink-2, #4a5160) }
.foto-msg.is-error { color: var(--ko, #c0392b); font-weight: 600 }
.foto-form[aria-busy="true"] .foto-btns { opacity: .55; pointer-events: none }
.foto-togli { margin-top: 12px; text-align: left; border-top: 1px solid var(--line, #e3e6eb); padding-top: 4px }
.foto-togli > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ko, #c0392b); font-weight: 600; list-style: none }
.foto-togli > summary::-webkit-details-marker { display: none }
.foto-togli p { margin: 2px 0 10px; font-size: 14px }
.foto-togli form { margin: 0 }
.foto-togli .btn { width: 100% }
/* on a computer the camera button would only open the same file chooser */
@media (hover: hover) and (pointer: fine) {
  .foto-btns .foto-cam { display: none !important }
  .gx .foto-btns .foto-file { background: var(--brand-primary); color: var(--brand-on-primary); border-color: transparent }
}

/* members' app: the photo in the top bar, «La tua foto» in the profile */
.ma-avatar { overflow: hidden }
.ma-avatar img { width: 100%; height: 100%; object-fit: cover; display: block }
.ma .mf-card { gap: 12px }
.ma .mf-row { display: flex; align-items: center; gap: 14px }
.ma .mf-pic { flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; border: 2.5px solid var(--acc);
  background: var(--ghisa2); color: var(--acc); font: 700 26px/1 'Oswald', sans-serif }
.ma .mf-pic img { width: 100%; height: 100%; object-fit: cover; display: block }
.ma .mf-row p { margin: 0; font-size: 14px; color: var(--tenue); line-height: 1.45 }
.ma .mf-card .foto-btns { margin: 0 }
.ma .mf-card .foto-btns .ma-btn { flex: 1 1 140px; height: auto; min-height: 48px }
.ma .mf-card .foto-msg { margin: 0 !important; min-height: 0; color: var(--tenue) }
.ma .mf-card .foto-msg:empty { display: none }
.ma .mf-card .foto-msg.is-error { color: #FFB4B8 }
.ma .mf-card .foto-togli { margin: 0; border-top-color: var(--riga) }
.ma .mf-card .foto-togli > summary { color: #FF8A8F }
.ma .mf-card .foto-togli p { color: var(--tenue) }
.ma .mf-danger { width: 100%; border-color: rgba(255,107,107,.5); color: #FF8A8F }

/* the entrance tablet: the photo replaces the big icon, which becomes its badge */
.vx[data-foto] .vx-icon { display: none !important }
.vx-foto { position: relative; width: clamp(120px, 22vh, 200px); aspect-ratio: 1; margin: 0 auto 18px; animation: vx-pop .35s var(--ease-spring) }
.vx-foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 6px rgba(255,255,255,.9), 0 18px 40px rgba(0,0,0,.35) }
.vx-badge { position: absolute; right: -2%; bottom: -2%; width: 34%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0f7a4a;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) }
.vx[data-stato="ko"] .vx-badge { color: #b3261e }
.vx[data-stato="out"] .vx-badge { color: #1f4fd1 }
.vx-badge svg { display: block !important; width: 62%; height: 62% }

/* the membership card on screen (viste/m/tessera.php): the photo beside the name, ringed with the gym's accent */
.ma-tessera .who.has-ritratto { flex-direction: row; align-items: center; gap: 12px }
.ma-tessera .who-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.ma-tessera .ritratto { flex: none; width: 19%; max-width: 92px; aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--acc), 0 6px 16px rgba(0,0,0,.35); background: var(--ghisa2) }
.ma .mf-link { color: var(--acc); font-weight: 700; text-decoration: none }

/* «Scarica la tessera» on the member's record: the line that says it is done */
.gx .sc-card-msg { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-3) }
.gx .sc-card-msg:empty { display: none }
.gx .sc-card-msg.is-error { color: var(--ko) }
/* «ASSOCIATO DA SETTEMBRE 2025» beside the number on narrow phones */
.ma-tessera .num { gap: 10px }
.ma-tessera .num span:last-child { text-align: right }
@media (max-width: 380px) { .ma-tessera .num { letter-spacing: .08em; font-size: 11px } }