/* =========================================================
   POSTCARD CONTROLS — CELEBRA STYLE
   Только визуал. Без логики.
   ========================================================= */

/* Контейнер открытки */
.pmv2-postcard-media {
	position: relative;
	line-height: 0;
}

/* ===============================
   OVERLAY (стрелки + кнопка)
   =============================== */

.pmv2-postcard-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ===============================
   КНОПКА «ВКЛЮЧИТЬ АНИМАЦИЮ»
   =============================== */

.pmv2-toggle-animation-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	padding: 10px 18px;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid #000000;
	border-radius: 6px;
	color: #000;
	cursor: pointer;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* при включении анимации — скрываем кнопку */
.celebra-animations-on .pmv2-toggle-animation-btn {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.9);
}

/* ===============================
   СТРЕЛКИ НАВИГАЦИИ (полутаблетки)
   =============================== */

.pmv2-nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;

	width: 46px;
	height: 72px;

	display: flex;
	align-items: center;
	justify-content: center;

	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(0, 0, 0, 0.35);

	font-size: 0;
	color: transparent;

	transition: transform 0.6s ease, opacity 0.6s ease;
}

/* левая */
.pmv2-nav-prev {
	left: -1.10rem; /* вынос влево за картинку */
	border-radius: 0 14px 14px 0;
}

/* правая */
.pmv2-nav-next {
	right: -1.10rem; /* вынос вправо за картинку */
	border-radius: 14px 0 0 14px;
}

/* ===============================
   SVG стрелки
   =============================== */

.pmv2-nav-button::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* влево */
.pmv2-nav-prev::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 20 7 12 16 4'/%3E%3C/svg%3E");
	transform: translateX(10px);
}

/* вправо */
.pmv2-nav-next::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='8 20 17 12 8 4'/%3E%3C/svg%3E");
	transform: translateX(-10px);
}

/* =========================================================
   POSTCARD NAV — COMPRESS TO EDGES (ANIMATION ON)
   ========================================================= */

/* левая стрелка — сжимается к ЛЕВОМУ краю */
body.pmv2-anim-on .pmv2-nav-prev {
	transform:
		translateY(-50%)
		scaleX(0.6);
	transform-origin: left center;
}

/* правая стрелка — сжимается к ПРАВОМУ краю */
body.pmv2-anim-on .pmv2-nav-next {
	transform:
		translateY(-50%)
		scaleX(0.6);
	transform-origin: right center;
}



/* =========================================================
   ОТКРЫТКА — РАСТЯГИВАНИЕ НА ШИРИНУ КОНТЕНТА
   Отвечает ТОЛЬКО за ширину открытки, не за отступы
   ========================================================= */

.pmv2-postcard-wrap {
	width: 100%;
	max-width: 100%;
}

.pmv2-postcard-media {
	width: 100%;
	max-width: 100%;
}

.pmv2-postcard-image {
	display: block;
	width: 100%;
	height: auto;
}







/* === SHARE BLOCK: layout === */

.pmv2-share-wrap {
  margin-top: 12px;
}

.pmv2-share-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
  position: relative; /* ЯКОРЬ для выпадающих соцсетей */
}

/* === COPY LINK BUTTON (80–85%) === */

.pmv2-copy-link-btn {
  flex: 1 1 80%;
  height: 36px;
  border: 1px solid #d0d0d0;
  background: #f3f3f3;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  position: relative;
  overflow: hidden;
}

.pmv2-copy-link-btn:hover {
  background: #e6e6e6;
}

/* визуальный эффект "Скопировано" */

.pmv2-copy-link-btn.pmv2-copied {
  background: #2ecc71;
  border-color: #2ecc71;
  color: #fff;
}

.pmv2-copy-link-btn.pmv2-copied::after {
  content: "Скопировано";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 200px);   /* ← ВОТ ОНО */
  transform: translateX(-50%);
  padding: 10px 16px;
  background: #2ecc71;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}

/* === SHARE TOGGLE BUTTON (15–20%) === */

.pmv2-share-toggle-wrapper {
  flex: 0 0 52px;
}

.pmv2-share-toggle {
  width: 100%;
  height: 36px;
  border: 1px solid #d0d0d0;
  background: #f3f3f3;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}

.pmv2-share-toggle:hover {
  background: #e6e6e6;
}

.pmv2-share-toggle svg {
  width: 30px;
  height: 30px;
}

/* === SHARE LINKS (HORIZONTAL DROPDOWN UNDER BOTH BUTTONS) === */

.pmv2-share-links {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  padding: 10px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  z-index: 10;
}

/* flex включается ТОЛЬКО когда hidden снят */
.pmv2-share-links:not([hidden]) {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

/* === SHARE ICON LINKS === */

.pmv2-share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #333;
  background: #f5f5f5;
  transition: background .2s ease, transform .2s ease;
}

.pmv2-share-link:hover {
  background: #e0e0e0;
  transform: translateY(-2px);
}

.pmv2-share-link svg {
  width: 18px;
  height: 18px;
}



/* =========================================================
   Celebra SVG icons — FIX SIZE (Prespa layout safe)
   ========================================================= */

/* контейнер иконки */
.celebra-share-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* сама SVG */
.celebra-share-icon svg {
  width: 38px;
  height: 38px;
  max-width: 38px;
  max-height: 38px;
  display: block;
 }
 
/* =========================================================
   Правим отступы рекламы (без inline в PHP)
   ========================================================= */ 
 .pmv2-ad-slot{
    margin: .5rem 0;
    padding: 0;
    text-align: center;
}

@media (max-width: 40rem){
    .pmv2-ad-slot{
        margin: .25rem 0;
    }
}