/* ============================================================================
   Mocko — акція «Іменний халат» (попап, офер-рядок, поле на оформленні).
   Дизайн-мова сайту: Gilroy, чорний #0a0a0a, лінії #e9e9e9/#d9d9d9, radius 4-6px.
   Попап навмисно повторює пластику .mocko-atc (custom.css).
   ========================================================================== */

/* ---- Попап ---- */
.mocko-robe {
  position: fixed; inset: 0; z-index: 100210;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
  font-family: Gilroy, Montserrat, sans-serif;
}
body.mocko-robe-open .mocko-robe { opacity: 1; visibility: visible; }
.mocko-robe-backdrop { position: absolute; inset: 0; background: rgba(16, 16, 16, .5); }
.mocko-robe-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: #fff; color: #0a0a0a; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
  padding: 26px 28px 28px;
  transform: translateY(10px) scale(.98);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
body.mocko-robe-open .mocko-robe-dialog { transform: none; }

.mocko-robe-close {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px;
  border: 0; background: transparent; cursor: pointer; color: #9a9a9a; padding: 0;
}
.mocko-robe-close::before, .mocko-robe-close::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.6px;
  background: currentColor; border-radius: 2px;
}
.mocko-robe-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.mocko-robe-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.mocko-robe-close:hover { color: #0a0a0a; }

.mocko-robe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding-right: 26px; }
.mocko-robe-gift { font-size: 20px; line-height: 1; }
.mocko-robe-title { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* стани попапа: пропозиція ↔ додано */
.mocko-robe .mocko-robe-title--added,
.mocko-robe .mocko-robe-if-added { display: none; }
.mocko-robe.is-added .mocko-robe-title--offer,
.mocko-robe.is-added .mocko-robe-if-offer { display: none; }
.mocko-robe.is-added .mocko-robe-title--added { display: inline; }
.mocko-robe.is-added .mocko-robe-if-added { display: inline-flex; }

.mocko-robe-product { display: flex; gap: 16px; padding-bottom: 16px; }
.mocko-robe-pic { flex: 0 0 auto; width: 88px; }
.mocko-robe-pic img { width: 88px; height: 116px; object-fit: cover; border-radius: 4px; background: #f5f5f5; display: block; }
.mocko-robe-info { flex: 1 1 auto; min-width: 0; }
.mocko-robe-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mocko-robe-text { margin-top: 6px; font-size: 13px; line-height: 1.45; color: #6a6a6a; }
.mocko-robe-price { margin-top: 8px; font-size: 17px; font-weight: 700; }
.mocko-robe-price .woocommerce-Price-amount { font-size: 17px; color: #0a0a0a; }

.mocko-robe-terms {
  margin: 0 0 4px; padding: 12px 14px;
  background: #fafafa; border: 1px solid #e9e9e9; border-radius: 4px;
  font-size: 12px; line-height: 1.5; color: #565454;
}

.mocko-robe-actions { display: flex; gap: 12px; margin-top: 2px; padding-top: 16px; border-top: 1px solid #ededed; }
.mocko-robe-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
  text-align: center; padding: 15px 14px; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.mocko-robe-btn--ghost,
.mocko-robe-btn--ghost:hover,
.mocko-robe-btn--ghost:focus { background: #fff; color: #0a0a0a !important; border: 1px solid #0a0a0a; }
.mocko-robe-btn--ghost:hover { background: #f4f4f4; }
.mocko-robe-btn--primary,
.mocko-robe-btn--primary:hover,
.mocko-robe-btn--primary:focus { background: #0a0a0a; color: #fff !important; border: 1px solid #0a0a0a; }
/* wc_price всередині кнопки/офера не має темніти від глобальних стилів ціни */
.mocko-robe-btn--primary .woocommerce-Price-amount,
.mocko-robe-btn--primary .woocommerce-Price-amount bdi,
.mocko-robe-btn--primary .woocommerce-Price-currencySymbol { color: #fff !important; font-size: inherit; font-weight: inherit; }
.mocko-robe-offer-title .woocommerce-Price-amount,
.mocko-robe-offer-title .woocommerce-Price-amount bdi { color: #0a0a0a !important; }
.mocko-robe-btn:hover { transform: scale(1.02); }
.mocko-robe-btn:active { transform: scale(.99); }
.mocko-robe-btn.is-loading { opacity: .6; pointer-events: none; }

/* Телефони → нижній лист, як у .mocko-atc */
@media (max-width: 600px) {
  .mocko-robe { padding: 0; align-items: flex-end; }
  .mocko-robe-dialog {
    max-width: 100%; border-radius: 16px 16px 0 0; padding: 22px 18px 22px;
    transform: translateY(100%); max-height: 92vh;
  }
  body.mocko-robe-open .mocko-robe-dialog { transform: none; }
  .mocko-robe-pic, .mocko-robe-pic img { width: 72px; }
  .mocko-robe-pic img { height: 96px; }
}

/* ---- Офер-рядок (кошик + оформлення) ---- */
.mocko-robe-offer {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; padding: 14px 16px;
  border: 1px solid #d9d9d9; border-radius: 4px; background: #fafafa;
  font-family: Gilroy, Montserrat, sans-serif;
}
.mocko-robe-offer-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.mocko-robe-offer-grow { flex: 1 1 auto; min-width: 0; }
.mocko-robe-offer-title { margin: 0; font-size: 14px; line-height: 1.4; color: #0a0a0a; }
.mocko-robe-offer-title .woocommerce-Price-amount { color: #0a0a0a; }
.mocko-robe-offer-note { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: #6a6a6a; }
.mocko-robe-offer .mocko-robe-add {
  flex: 0 0 auto; padding: 12px 26px; border-radius: 30px;
  background: #000; color: #fff; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background .2s ease;
}
.mocko-robe-offer .mocko-robe-add:hover { background: rgba(0, 0, 0, .7); }
.mocko-robe-offer .mocko-robe-add.is-loading { opacity: .6; pointer-events: none; }

@media (max-width: 600px) {
  .mocko-robe-offer { flex-wrap: wrap; }
  .mocko-robe-offer .mocko-robe-add { width: 100%; }
}

/* ---- Оформлення: поле напису + згода ---- */
body.woocommerce-checkout .mocko-robe-field .woocommerce-input-wrapper .description,
body.woocommerce-checkout .mocko-robe-field span.description {
  display: block; margin-top: 6px;
  font-size: 12px; line-height: 1.45; color: #6a6a6a; font-style: normal;
}
body.woocommerce-checkout .mocko-robe-agree {
  margin-top: 10px; padding: 14px 16px;
  border: 1px solid #e2e2e2; border-radius: 8px; background: #fafafa;
  transition: border-color .2s ease, background .2s ease;
}
body.woocommerce-checkout .mocko-robe-agree label.checkbox {
  display: flex; align-items: flex-start; gap: 11px;
  font-family: Gilroy, Montserrat, sans-serif;
  font-size: 13px; line-height: 1.55; color: #2a2a2a; cursor: pointer;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 400;
  margin: 0;
}
body.woocommerce-checkout .mocko-robe-agree input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #0a0a0a; cursor: pointer;
}
/* прибрати суперечливе «(необовʼязково)» від WooCommerce — згода обовʼязкова */
body.woocommerce-checkout .mocko-robe-agree .optional { display: none !important; }
/* власна «зірочка» обовʼязковості (валідуємо самі — клієнт+сервер) */
body.woocommerce-checkout .mocko-robe-agree label.checkbox::after {
  content: " *"; color: #b3261e; font-weight: 700;
}
/* стан помилки, коли галочку не поставили */
body.woocommerce-checkout .mocko-robe-agree.mocko-robe-agree--err {
  border-color: #d63638; background: #fcf0f1;
}
body.woocommerce-checkout .mocko-robe-agree-msg {
  display: block; margin-top: 8px; padding-left: 29px;
  font-family: Gilroy, Montserrat, sans-serif; font-size: 12.5px; line-height: 1.45; color: #d63638;
}