/* Общ албум (album.php): цветовете следват стила на събитието (--ev-*). Спринт 3 (VIS-19/39): картата за качване,
   полетата и картите на предизвикателствата са в тона на палитрата (--ev-surface/--ev-field), второстепенният текст
   е --ev-muted вместо прозрачност. Живата стена и снимките на цял екран остават тъмни при всяка палитра. */
.album-body {
  margin: 0;
  background: var(--ev-bg, #fbf7ef);
  color: var(--ev-text, #2e2a25);
  font-family: var(--ev-body, 'Montserrat', 'Segoe UI', Arial, sans-serif);
}
#album-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
.album-head {
  text-align: center;
}
.album-label {
  font-size: 12px;
  letter-spacing: 0.25em;
  font-weight: 600;
  margin: 0;
}
.album-head h1 {
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  color: var(--ev-primary, #8f6d23);
  font-weight: 500;
  font-size: 36px;
  margin: 8px 0;
}
.album-muted {
  color: var(--ev-muted, #5b5751);
  text-align: center;
}
.album-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin: 20px auto;
  padding: 20px;
  background: var(--ev-surface, #fdfbf6);
  border-radius: 12px;
  border: 1px solid var(--ev-line, #dbceb2);
}
.album-upload label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}
.album-upload input[name='name'] {
  font: inherit;
  font-weight: 400;
  padding: 11px;
  border: 1px solid var(--ev-line-strong, #8a8680);
  border-radius: 6px;
  background: var(--ev-field, #fefdfb);
  color: var(--ev-text, #2e2a25);
}
.album-upload ::placeholder {
  color: var(--ev-muted, #5b5751);
  opacity: 1;
}
.album-pick input {
  font: inherit;
  font-weight: 400;
}
.album-button {
  min-height: 48px;
  border-radius: 35px;
  border: none;
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
  font: inherit;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
}
.album-button:focus-visible {
  outline: 2px solid var(--ev-text, #292725);
  outline-offset: 2px;
}
.album-progress {
  margin: 0;
  font-size: 14px;
  color: inherit;
}
.album-grid {
  columns: 3 200px;
  column-gap: 8px;
  margin-top: 16px;
}
.album-grid a {
  display: block;
  margin-bottom: 8px;
}
.album-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
/* PERF-F-07: преди зареждането снимката заема 4:3 (след него – истинската пропорция), а не 0 px. */
.album-grid img:not([width]) {
  aspect-ratio: auto 4 / 3;
}
.album-foot {
  text-align: center;
  font-size: 13px;
  color: var(--ev-muted, #5b5751);
  margin-top: 24px;
}
.album-show {
  background: #000;
}
.album-show #album-main {
  max-width: none;
  padding: 0;
}
.album-slide {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.album-slide img {
  max-width: 100vw;
  max-height: 88vh;
  object-fit: contain;
}
.album-slide p {
  color: #fff;
  font-size: 20px;
  margin: 12px 0 0;
}
#alb-full {
  position: fixed;
  right: 16px;
  bottom: 16px;
  opacity: 0.7;
}
#portal-status {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: var(--ev-text, #2e2a25);
  color: var(--ev-bg, #fbf7ef);
  border-radius: 8px;
  z-index: 10;
}
#portal-status:not(:empty) {
  padding: 10px 16px;
}

/* ---------- Изчистване по дизайн системата (28.09.2026) ---------- */
.album-body {
  -webkit-font-smoothing: antialiased;
}
#album-main {
  padding: clamp(32px, 6vw, 64px) 16px 40px;
}
.album-label::before {
  content: '';
  display: block;
  width: 64px;
  height: 7px;
  margin: 0 auto 16px;
  background:
    radial-gradient(circle, var(--ev-primary, #8f6d23) 0 3px, transparent 3.5px) center / 7px 7px no-repeat,
    linear-gradient(var(--ev-primary, #8f6d23), var(--ev-primary, #8f6d23)) center / 100% 1px no-repeat;
  opacity: 0.75;
}
.album-label {
  letter-spacing: 0.3em;
}
.album-head h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  margin: 10px 0 12px;
}
.album-upload {
  max-width: 460px;
  margin: 28px auto 36px;
  padding: 24px;
  gap: 16px;
  border-radius: 16px;
  box-shadow: var(--ev-shadow, none);
}
.album-upload input[name='name'] {
  height: 48px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 16px;
}
.album-upload input[name='name']:focus {
  border-color: var(--ev-primary, #8f6d23);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-primary, #8f6d23) 20%, transparent);
}
/* Поле за снимките: голяма зона с иконка вместо стандартния бутон на браузъра. */
.album-pick {
  position: relative;
  align-items: center;
  text-align: center;
  gap: 4px !important;
  padding: 24px 16px;
  border: 1px dashed color-mix(in srgb, var(--ev-primary, #8f6d23) 55%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ev-primary, #8f6d23) 6%, var(--ev-field, #fefdfb));
  cursor: pointer;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.album-pick:hover,
.album-pick.has-files {
  border-color: var(--ev-primary, #8f6d23);
  background: color-mix(in srgb, var(--ev-primary, #8f6d23) 12%, var(--ev-field, #fefdfb));
}
.album-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.album-pick:focus-within {
  outline: 2px solid var(--ev-text, #292725);
  outline-offset: 2px;
}
.album-pick-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
}
.album-pick strong {
  font-size: 16px;
}
.album-pick small {
  font-weight: 400;
  font-size: 13px;
  color: var(--ev-muted, #5b5751);
}
.album-pick.has-files small {
  font-weight: 600;
  color: var(--ev-primary-ink, #856623);
}
.album-button {
  transition: filter 0.2s;
}
.album-button:hover {
  filter: brightness(1.08);
}
.album-button:disabled {
  opacity: 0.6;
  cursor: progress;
}
.album-progress:empty {
  display: none;
}
.album-progress {
  text-align: center;
}
.album-grid {
  column-gap: 10px;
}
.album-grid a {
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: 8px;
}
.album-grid img {
  border-radius: 8px;
  transition: transform 0.4s;
}
.album-grid a:hover img {
  transform: scale(1.03);
}
.album-empty {
  column-span: all;
  padding: 32px 0;
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  font-style: italic;
  font-size: 18px;
}
.album-foot {
  margin-top: 40px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.album-slide img {
  opacity: 0;
  transition: opacity 0.9s;
}
.album-slide img.is-in {
  opacity: 1;
}
.album-slide p {
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  font-style: italic;
  font-size: 24px;
  opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
  .album-slide img,
  .album-grid img {
    transition: none;
  }
}

/* ---------- Предизвикателства, филтри, моменти, сърца (миграция 034) ---------- */
.album-challenges {
  margin: 8px 0 28px;
  text-align: center;
}
.album-challenges h2,
.album-moment h2 {
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  color: var(--ev-primary, #8f6d23);
  font-weight: 500;
}
.album-challenges h2 {
  margin: 0 0 4px;
  font-size: 26px;
}
.album-ch-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 16px;
  text-align: left;
}
.album-ch {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--ev-line, #dbceb2);
  border-radius: 16px;
  background: var(--ev-surface, #fdfbf6);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.album-ch:hover {
  border-color: var(--ev-primary, #8f6d23);
  transform: translateY(-1px);
}
.album-ch.is-on {
  border-color: var(--ev-primary, #8f6d23);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-primary, #8f6d23) 18%, transparent);
}
.album-ch-no {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
  font-size: 13px;
  font-weight: 700;
}
.album-ch > span:not(.album-ch-no) {
  font-weight: 600;
  line-height: 1.3;
}
.album-ch small {
  color: var(--ev-muted, #5b5751);
  font-size: 12px;
}
.album-upload select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ev-line-strong, #8a8680);
  border-radius: 12px;
  background: var(--ev-field, #fefdfb);
  color: var(--ev-text, #2e2a25);
  font: inherit;
}
.album-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 28px 0 6px;
}
.album-filters button {
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--ev-primary, #8f6d23) 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 600 13px var(--ev-body, 'Montserrat', sans-serif);
  cursor: pointer;
}
.album-filters button.is-on {
  border-color: var(--ev-primary, #8f6d23);
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
}
/* моменти от графика */
.album-moment {
  margin-top: 26px;
}
.album-moment h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 4px;
  font-size: 22px;
}
.album-moment h2 time {
  font-family: var(--ev-body, 'Montserrat', sans-serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ev-primary-ink, #856623);
  font-variant-numeric: lining-nums tabular-nums;
}
.album-moment h2 small {
  font-family: var(--ev-body, 'Montserrat', sans-serif);
  color: var(--ev-muted, #5b5751);
  font-size: 12px;
}
/* снимка: картинка + подпис с името, предизвикателството и сърце */
.album-photo {
  position: relative;
  margin: 0 0 10px;
  overflow: hidden;
  border-radius: 10px;
  break-inside: avoid;
}
.album-photo a {
  margin: 0;
}
.album-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 26px 8px 8px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.album-photo figcaption > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.album-photo figcaption em {
  font-style: normal;
  font-weight: 500;
  opacity: 0.85;
}
.album-heart {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #b0495a;
  font: 700 12px var(--ev-body, 'Montserrat', sans-serif);
  cursor: pointer;
  pointer-events: auto;
}
.album-heart svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.album-heart.is-on svg {
  fill: currentColor;
}
.album-heart b:empty {
  display: none;
}
.album-fav {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
}
.album-fav svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ---------- Жива стена (#<код>:show) ---------- */
.album-wall {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #0d0c0b;
}
.album-wall-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity 1.2s ease,
    transform 8s ease-out;
}
.album-wall-img.is-in {
  opacity: 1;
  transform: scale(1.08);
}
.album-wall-top {
  position: absolute;
  top: 24px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.album-wall-top span {
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  font-size: 28px;
}
.album-wall-top b {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.album-wall-cap {
  position: absolute;
  bottom: 28px;
  left: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 60vw;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.album-wall-cap strong {
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  font-size: 30px;
  font-style: italic;
  font-weight: 400;
}
.album-wall-cap em {
  font-size: 16px;
  font-style: normal;
  opacity: 0.85;
}
.album-wall-new {
  display: none;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ev-primary, #8f6d23);
  color: var(--ev-on-primary, #fff);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
}
.album-wall-cap.is-new .album-wall-new {
  display: inline-block;
}
.album-wall-qr {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: #fff;
  color: #2e2a25;
  font-size: 14px;
  font-weight: 700;
}
.album-wall-qr svg,
.album-wall-qr img {
  width: 132px;
  height: 132px;
}
.album-wall-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-family: var(--ev-heading, 'Lora', Georgia, serif);
  font-size: 28px;
  font-style: italic;
}
.album-wall-empty[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .album-wall-img {
    transform: none !important;
    transition: opacity 0.6s;
  }
}
/* „Цял екран“ — горе вдясно, за да не закрива QR кода на живата стена */
.album-show #alb-full {
  top: 16px;
  bottom: auto;
  z-index: 2;
}
/* Картата за качване е в тона на палитрата (--ev-surface), текстът в --ev-text. Подравнен е вляво. */
.album-upload {
  color: var(--ev-text, #2e2a25);
  text-align: left;
}
.album-upload .album-muted {
  text-align: left;
}
/* Кратко известие за личните данни под бутона „Качи“ (GDPR-02) и линкът в долния колонтитул. */
.album-privacy {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ev-muted, #5b5751);
}
.album-privacy a,
.album-foot a {
  color: inherit;
  text-underline-offset: 3px;
}
/* Зона за докосване ≥ 24px, 8px до горния ред (4px отстъп + 6px padding). */
.album-foot .album-foot-privacy {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  min-height: 24px;
  margin: 4px auto 0;
  padding: 6px 8px;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* Визуално ревю P2-8 (GDPR-09): „Поверителност · Вашите данни“ на един ред, със зона за докосване ≥ 24px. */
.album-foot-legal {
  display: block;
  margin-top: 4px;
  text-align: center;
}
.album-foot .album-foot-legal .album-foot-privacy {
  display: inline-block;
  margin: 0;
}
.album-foot-sep {
  margin: 0 4px;
  opacity: 0.5;
}

/* UT-05: преглед на цял екран и бутонът „Качете снимки“ над галерията */
.album-head .album-jump {
  margin-top: 14px;
}
.album-photo a.album-open {
  display: block;
  cursor: zoom-in;
}
.album-photo a.album-open:focus-visible {
  outline: 2px solid var(--ev-primary, #8f6d23);
  outline-offset: 2px;
}
dialog.album-viewer {
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 12, 10, 0.95);
  color: #fff;
}
dialog.album-viewer[open] {
  display: grid;
  place-items: center;
}
dialog.album-viewer::backdrop {
  background: transparent;
}
.album-viewer img {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  border-radius: 3px;
}
.album-viewer button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}
.album-viewer button:hover {
  background: rgba(255, 255, 255, 0.26);
}
.album-viewer button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.album-v-close {
  top: 12px;
  right: 12px;
}
.album-v-prev {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.album-v-next {
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.album-viewer.is-single .album-v-prev,
.album-viewer.is-single .album-v-next {
  display: none;
}
.album-v-cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}