/* ==========================================================================
   album.css - Албум за снимки: „Как да подготвиш", карта с броячите, зони за
   качване (карти с пунктирана зона), миниатюри, лента за грешка, бутон.
   Префикси: .mg-album
   Дизайн: claude-design/06-album (1440 + 390). Лейаутът на страницата
   (галерия 3:4, акордеони и видео вляво) е в product.css → .mg-product--album.
   ЕТАП B прилага само вида (правило R6) върху маркъпа на wc-customer-image-upload.
   Двете отделни зони и състоянията са ЗАДАНИЕТО ЗА ЕТАП C.

   Копие на magia/makets/final/assets/album.css (в макета няма .mg-maket-note
   правила - нищо не е махнато) + раздел „ЖИВИЯТ ПЛЪГИН" накрая, който пренася
   същия вид върху живите селектори от design/live/album-dom.md.
   Специфичност: base.css има body.mg p / ul / h1-h4 (0,1,2 и 0,1,1) и
   body.mg a:any-link (0,2,1). Затова всяко заглавие, абзац и списък тук се
   пише с body.mg отпред.
   ========================================================================== */

/* ---------- Как да подготвиш снимките ---------- */
.mg-album-howto{ padding:22px 24px; background:var(--mg-p-teal-bg); border-radius:var(--mg-r-lg); }
body.mg .mg-album-howto__title{ margin:0 0 12px; font-size:20px; line-height:1.3; color:#0E2F2D; }
body.mg .mg-album-howto ul{ display:flex; flex-direction:column; gap:12px; list-style:none; margin:0; padding:0; }
.mg-album-howto li{ display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.55; color:#0E2F2D; }
.mg-album-howto svg{ flex:0 0 auto; margin-top:1px; opacity:.8; }

/* ---------- Форма (form.cart): колона карти ---------- */
.mg-album__form{ display:flex; flex-direction:column; gap:18px; }

/* ---------- Карта с броячите (.upload-helper-text) ---------- */
.mg-album__counter{
  display:flex; flex-direction:column; gap:12px; padding:22px 24px;
  background:var(--mg-white); border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm);
}
.mg-album__counter-top{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; }
body.mg .mg-album__total{ margin:0; font-family:var(--mg-font-head); font-size:22px; font-weight:700; line-height:1.25; color:var(--mg-ink); }
.mg-album__left{ font-size:15px; color:var(--mg-text); }
.mg-album__bar{ height:10px; overflow:hidden; background:var(--mg-powder); border-radius:var(--mg-r-pill); }
.mg-album__bar span{ display:block; height:100%; background:var(--mg-pink); border-radius:var(--mg-r-pill); }
.mg-album__bar--done span{ background:var(--mg-boxnow); }
.mg-album__split{ display:flex; gap:6px 18px; flex-wrap:wrap; font-size:15px; color:var(--mg-text); }
.mg-album__split b{ color:var(--mg-ink); }

/* ---------- Зона за качване: бяла карта + пунктирана зона вътре ---------- */
.mg-album__group{
  display:flex; flex-direction:column; gap:16px; padding:24px;
  background:var(--mg-white); border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm);
}
.mg-album__group-head{ display:flex; align-items:center; justify-content:space-between; gap:12px 16px; flex-wrap:wrap; }
body.mg .mg-album__group-title{ margin:0 0 2px; font-size:21px; line-height:1.25; }
body.mg .mg-album__group-sub{ margin:0; font-size:15px; line-height:1.4; color:var(--mg-text); }
body.mg .mg-album__pick{ min-height:46px; padding:11px 20px; font-size:15px; font-weight:700; }
body.mg .mg-album__pick.mg-btn--ghost{ border-color:var(--mg-p-pink); }
.mg-album__drop{
  display:flex; flex-direction:column; gap:14px; padding:18px;
  border:2px dashed var(--mg-p-pink); border-radius:14px; background:var(--mg-cream);
}
.mg-album__drop--teal{ border-color:#79D2CB; }
body.mg .mg-album__drop-text{ margin:0; font-size:15px; line-height:1.5; text-align:center; color:var(--mg-text); }

/* ---------- Миниатюри (.thumbs-container) ---------- */
/* 6 в колона на 1440 (дизайн), по-малко на таблет - R6: auto-fill minmax(72px) */
.mg-album__thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px; }
.mg-album__thumbs--land{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mg-album__thumb{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:10px; background:var(--mg-powder); }
.mg-album__thumbs--land .mg-album__thumb{ aspect-ratio:3/2; }
.mg-album__thumb img{ width:100%; height:100%; object-fit:cover; }
.mg-album__thumb--ph:nth-child(4n+1){ background:var(--mg-p-pink-bg); color:var(--mg-pink-text); }
.mg-album__thumb--ph:nth-child(4n+2){ background:var(--mg-p-purple-bg); color:#4A2E85; }
.mg-album__thumb--ph:nth-child(4n+3){ background:var(--mg-p-teal-bg); color:var(--mg-teal-text); }
.mg-album__thumb--ph:nth-child(4n+4){ background:var(--mg-p-yellow-bg); color:#6B4400; }
.mg-album__x{
  position:absolute; top:5px; right:5px;
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px; padding:0; border:0; border-radius:50%;
  background:var(--mg-ink); color:var(--mg-white); font-size:12px; line-height:1; cursor:pointer;
}
.mg-album__num{ position:absolute; left:6px; bottom:4px; font-size:12px; font-weight:700; line-height:1.4; }
.mg-album__thumb--progress{
  display:flex; align-items:center; justify-content:center;
  background:var(--mg-p-pink-bg); font-size:12px; font-weight:700; color:var(--mg-pink-text);
}
.mg-album__thumb--progress::before{ content:''; position:absolute; inset:0; background:rgba(255,255,255,.55); }
.mg-album__thumb--progress span{ position:relative; }
.mg-album__thumb--progress::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(to right,var(--mg-pink) var(--mg-p,62%),var(--mg-line) 0);
}
.mg-album__thumb--error{
  display:flex; align-items:center; justify-content:center; padding:6px; text-align:center;
  overflow:visible; background:var(--mg-p-pink-bg); border:2px solid var(--mg-pink);
  font-size:11px; font-weight:700; line-height:1.3; color:var(--mg-pink-text);
}
.mg-album__thumb--add{
  display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer;
  border:2px dashed #F0CFC4; background:transparent; color:var(--mg-meta);
}
.mg-album__thumb--add:hover{ border-color:var(--mg-p-pink); color:var(--mg-pink-text); }
.mg-album__thumb--more{
  display:flex; align-items:center; justify-content:center;
  background:var(--mg-powder); font-weight:700; color:var(--mg-ink);
}

/* ---------- Лента за грешка (.wc-ciup-messages) ---------- */
.mg-album__msg{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--mg-r-sm); text-align:left;
  background:var(--mg-p-pink-bg); color:#7A1E49; font-size:14px; line-height:1.5;
}
.mg-album__msg > span{ flex:1 1 200px; }
body.mg .mg-album__msg .mg-btn{ min-height:40px; padding:9px 16px; font-size:14px; font-weight:700; }
.mg-album__msg--ok{ background:var(--mg-p-teal-bg); color:var(--mg-teal-text); }

/* ---------- Бутон и подсказка ---------- */
.mg-album__submit{ display:flex; flex-direction:column; gap:10px; }
body.mg .mg-album__submit .mg-btn{ min-height:58px; padding:16px; font-size:18px; font-weight:700; }
body.mg .mg-album__submit .mg-btn[disabled]{ background:#B8A6AC; border-color:#B8A6AC; color:var(--mg-white); }
body.mg .mg-album__hint{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0; font-size:15px; line-height:1.4; text-align:center; color:var(--mg-text);
}
.mg-album__hint svg{ flex:0 0 auto; opacity:.6; }

/* ---------- Ред в количката и чекаута (етап C) ---------- */
.mg-album__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.mg-album__mini{ display:flex; gap:4px; }
.mg-album__mini span{ display:block; width:26px; height:32px; border-radius:6px; background:var(--mg-p-pink-bg); }
.mg-album__mini b{
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:32px; padding:0 6px; border-radius:6px;
  background:var(--mg-powder); font-size:12px; color:var(--mg-ink);
}

/* ==========================================================================
   Мобилно (дизайн 06-album-390)
   ========================================================================== */
@media (max-width:767px){
  .mg-album-howto{ padding:16px; border-radius:14px; }
  body.mg .mg-album-howto__title{ margin-bottom:8px; font-size:17px; }
  body.mg .mg-album-howto ul{ gap:6px; }
  .mg-album-howto li{ gap:10px; font-size:14px; line-height:1.6; }
  .mg-album-howto svg{ width:18px; height:18px; }

  .mg-album__form{ gap:14px; }
  .mg-album__counter{ gap:10px; padding:16px; border-radius:14px; }
  body.mg .mg-album__total{ font-size:18px; }
  .mg-album__left,.mg-album__split{ font-size:14px; }
  .mg-album__bar{ height:8px; }

  .mg-album__group{ gap:12px; padding:16px; border-radius:14px; }
  .mg-album__group-head{ flex-direction:column; align-items:stretch; }
  body.mg .mg-album__group-title{ font-size:18px; }
  body.mg .mg-album__pick{ width:100%; min-height:48px; }
  .mg-album__drop{ gap:12px; padding:12px; border-radius:var(--mg-r-sm); }
  .mg-album__thumbs,
  .mg-album__thumbs--land{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .mg-album__thumb{ border-radius:8px; }
  .mg-album__x{ top:4px; right:4px; width:22px; height:22px; }
  .mg-album__num{ left:5px; font-size:11px; }
  .mg-album__thumb--error{ padding:4px; font-size:10px; line-height:1.25; }
  .mg-album__msg{ flex-direction:column; align-items:stretch; gap:8px; padding:12px; }
  .mg-album__msg > span{ flex:0 1 auto; }
  body.mg .mg-album__msg .mg-btn{ min-height:44px; }
  body.mg .mg-album__submit .mg-btn{ min-height:52px; font-size:16px; }
}

/* ==========================================================================
   ЖИВИЯТ ПЛЪГИН wc-customer-image-upload (правило R6 + изменение И8)
   Селекторите са САМО от design/live/album-dom.md. Маркъпът на плъгина НЕ се
   пипа - нито един клас не се преименува, защото JS-ът му се хваща за тях.
   Редът в DOM-а („Добавяне в количката" е ПРЕДИ блока за качване) се обръща
   с `order` върху form.cart, не с местене на маркъп.
   Специфичност: `body.mg .mg-product--album .wc-ciup-container X` = (0,4,2) -
   бие и wc-image-upload.css (най-много (0,2,1): .wc-ciup-container .thumbs…),
   и .elementor-kit-11 button (0,1,1), и body.mg h4 / body.mg p (0,1,1).
   Затова специфичността тук се бие само със селектор - без изключващи правила.
   ========================================================================== */

/* form.cart = .mg-album__form; div.wc-ciup-container минава пръв (R6).
   `div.product` е в селектора заради woocommerce.css
   `.woocommerce div.product form.cart` (0,3,2) - тук е (0,4,3). */
body.mg div.product.mg-product--album form.cart{ display:flex; flex-direction:column; gap:18px; }
body.mg div.product.mg-product--album form.cart > .wc-ciup-container{ order:-1; }
/* clearfix-ът на Woo (content:" "; display:table) иначе става флекс дете с празен ред */
body.mg div.product.mg-product--album form.cart::before,
body.mg div.product.mg-product--album form.cart::after{ content:none; }

/* B5.6: „Добавяне в количката" на албума.
   `product.css` дава на бутона `flex:1 1 280px` - в ред това е ширина, но
   формата тук е КОЛОНА и 280px става височина (бутонът излизаше 576x280px).
   Селекторът е (0,5,3) над (0,4,1)/(0,4,2) в `product.css`; макет
   `album.html` → `.mg-album__submit .mg-btn` (цяла ширина). Височината остава
   тази от `product.css` (58px, под 768px - 52px), както е в макета. */
body.mg div.product.mg-product--album form.cart .single_add_to_cart_button,
body.mg div.product.mg-product--album form.cart a.single_add_to_cart_button{
  flex:0 0 auto; width:100%;
}

/* div.wc-ciup-container = колоната от карти (.mg-album__form).
   Вътрешният ред НЕ се пипа с order - бъдещ елемент на плъгина без order
   (индивидуален прогрес, грешка) би скочил най-отгоре. */
body.mg .mg-product--album .wc-ciup-container{
  display:flex; flex-direction:column; align-items:stretch; gap:14px;
}

/* button.button.choose-images = .mg-album__pick, но ПЛЪТЕН .mg-btn (И8 сменя R6) */
body.mg .mg-product--album .wc-ciup-container button.choose-images{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  align-self:flex-start; min-height:46px; padding:11px 20px;
  font-family:var(--mg-font-body); font-size:15px; font-weight:700; line-height:1.2;
  color:var(--mg-white); background:var(--mg-pink);
  border:2px solid var(--mg-pink); border-radius:var(--mg-r-pill);
  text-transform:none; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
body.mg .mg-product--album .wc-ciup-container button.choose-images:hover{
  background:var(--mg-pink-hover); border-color:var(--mg-pink-hover); color:var(--mg-white);
}

/* button.button.upload-images = .mg-btn--info (тюркоазен, „Прикачи Снимки") */
body.mg .mg-product--album .wc-ciup-container button.upload-images{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  align-self:flex-start; min-height:46px; padding:11px 20px;
  font-family:var(--mg-font-body); font-size:15px; font-weight:700; line-height:1.2;
  color:var(--mg-white); background:var(--mg-teal);
  border:2px solid var(--mg-teal); border-radius:var(--mg-r-pill);
  text-transform:none; text-decoration:none; cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
body.mg .mg-product--album .wc-ciup-container button.upload-images:hover{
  background:var(--mg-teal-text); border-color:var(--mg-teal-text); color:var(--mg-white);
}
body.mg .mg-product--album .wc-ciup-container button.choose-images[disabled],
body.mg .mg-product--album .wc-ciup-container button.upload-images[disabled]{
  background:var(--mg-line); border-color:var(--mg-line); color:var(--mg-meta); cursor:not-allowed;
}

/* div.wc-ciup-messages = .mg-album__msg (лентата за грешка) */
body.mg .mg-product--album .wc-ciup-container .wc-ciup-messages{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border-radius:var(--mg-r-sm); text-align:left;
  background:var(--mg-p-pink-bg); color:#7A1E49; font-size:14px; line-height:1.5;
}
/* празна лента не се показва (плъгинът държи div-а винаги в DOM-а) */
body.mg .mg-product--album .wc-ciup-container .wc-ciup-messages:empty{ display:none; }
body.mg .mg-product--album .wc-ciup-container .wc-ciup-messages p{
  margin:0; color:#7A1E49; font-size:14px; line-height:1.5;
}
body.mg .mg-product--album .wc-ciup-container .wc-ciup-messages a{
  color:#7A1E49; font-weight:700; text-decoration:underline; text-underline-offset:3px;
}

/* div.upload-helper-text = .mg-album__counter (картата с броячите) */
body.mg .mg-product--album .wc-ciup-container .upload-helper-text{
  display:flex; flex-direction:column; gap:12px; padding:22px 24px;
  background:var(--mg-white); border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm);
  font-family:var(--mg-font-head); font-size:22px; font-weight:700; line-height:1.3;
  color:var(--mg-ink);
}
body.mg .mg-product--album .wc-ciup-container .upload-helper-text p{
  margin:0; font-family:var(--mg-font-head); font-size:22px; font-weight:700; line-height:1.3;
  color:var(--mg-ink);
}

/* div.total-upload-progress = обвивката на лентата и процентите */
body.mg .mg-product--album .wc-ciup-container .total-upload-progress{
  display:flex; flex-direction:column; gap:6px;
}
/* div.total-progress-bar-container = .mg-album__bar (10px на фон --mg-powder) */
body.mg .mg-product--album .wc-ciup-container .total-progress-bar-container{
  height:10px; overflow:hidden; background:var(--mg-powder); border-radius:var(--mg-r-pill);
}
/* div.total-progress-bar = розовата част (ширината идва от плъгина) */
body.mg .mg-product--album .wc-ciup-container .total-progress-bar{
  display:block; height:100%; background:var(--mg-pink); border-radius:var(--mg-r-pill);
  transition:width .2s;
}
/* div.total-progress-label = процентите (.mg-album__left) */
body.mg .mg-product--album .wc-ciup-container .total-progress-label{
  font-family:var(--mg-font-body); font-size:15px; font-weight:500; line-height:1.4;
  text-align:right; color:var(--mg-text);
}

/* div.wc-ciup-group.generic-group = .mg-album__drop (пунктираната зона) */
body.mg .mg-product--album .wc-ciup-container .wc-ciup-group{
  display:flex; flex-direction:column; gap:14px; padding:18px;
  border:2px dashed var(--mg-p-pink); border-radius:14px; background:var(--mg-cream);
}
/* h4 „Избрани Снимки" = .mg-album__group-title (PT Serif 21) */
body.mg .mg-product--album .wc-ciup-container .wc-ciup-group h4{
  margin:0; font-family:var(--mg-font-head); font-size:21px; font-weight:700; line-height:1.25;
  color:var(--mg-ink);
}
body.mg .mg-product--album .wc-ciup-container .wc-ciup-group p{
  margin:0; font-size:15px; line-height:1.5; color:var(--mg-text);
}

/* div.thumbs-container = .mg-album__thumbs (мрежата миниатюри) */
body.mg .mg-product--album .wc-ciup-container .thumbs-container{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px;
}
/* рамката на миниатюрата - 4:5 на пастелен фон, докато снимката зарежда */
body.mg .mg-product--album .wc-ciup-container .thumbs-container > div{
  position:relative; overflow:hidden; aspect-ratio:4/5;
  border-radius:10px; background:var(--mg-powder);
}
body.mg .mg-product--album .wc-ciup-container .thumbs-container img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:10px;
}

@media (max-width:767px){
  body.mg div.product.mg-product--album form.cart{ gap:14px; }
  body.mg .mg-product--album .wc-ciup-container{ gap:12px; }
  body.mg .mg-product--album .wc-ciup-container button.choose-images,
  body.mg .mg-product--album .wc-ciup-container button.upload-images{
    align-self:stretch; min-height:48px;
  }
  body.mg .mg-product--album .wc-ciup-container .wc-ciup-messages{
    flex-direction:column; align-items:stretch; gap:8px; padding:12px;
  }
  body.mg .mg-product--album .wc-ciup-container .upload-helper-text,
  body.mg .mg-product--album .wc-ciup-container .upload-helper-text p{
    font-size:18px;
  }
  body.mg .mg-product--album .wc-ciup-container .upload-helper-text{
    gap:10px; padding:16px; border-radius:14px;
  }
  body.mg .mg-product--album .wc-ciup-container .total-progress-bar-container{ height:8px; }
  body.mg .mg-product--album .wc-ciup-container .total-progress-label{ font-size:14px; }
  body.mg .mg-product--album .wc-ciup-container .wc-ciup-group{
    gap:12px; padding:12px; border-radius:var(--mg-r-sm);
  }
  body.mg .mg-product--album .wc-ciup-container .wc-ciup-group h4{ font-size:18px; }
  body.mg .mg-product--album .wc-ciup-container .thumbs-container{
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  }
  body.mg .mg-product--album .wc-ciup-container .thumbs-container > div{ border-radius:8px; }
  body.mg .mg-product--album .wc-ciup-container .thumbs-container img{ border-radius:8px; }
}