/*
 * @file: Source\plugins\photocka-service-registry\assets\css\style.css
 * @version: 1.0.0
 * @updated: 2026-03-15 12:03:57
 * @size: 23128
 */
	/* =========================================================
   Service Registry — Shared tokens
   ========================================================= */

:root{
  /* --- Core blues --- */
  --sr-blue: #1e33b7;                 /* legacy solid (если где-то ещё нужно) */
  --sr-blue-top: #030583;             /* NEW: gradient top */
  --sr-blue-bottom: #2772fa;          /* NEW: gradient bottom */
  --sr-blue-grad: linear-gradient(180deg, var(--sr-blue-top) 0%, var(--sr-blue-bottom) 100%);

  --spt-blue-h1:  #cfd7ff;     /* +1 тон (темнее) */
  --spt-blue-h2:  #a7b3ff;     /* +2 тона */
  --spt-blue-h3:  #334ad1;     /* +3 тона (заголовок) */

  --sr-border: #3d52a0;
  --sr-shadow: rgba(168, 151, 123, 0.6);

  --sr-text: #1f1f1f;
  --sr-price: #23304a;

  --sr-cta-bg: #ea9616;
  --sr-cta-text: #ffffff;

  /* --- Table header color (blue theme) --- */
  --sr-table-header-bg: var(--spt-blue-h1);   /* как было раньше */
  --sr-table-header-text: #ffffff;

  /* --- Collapsible summary (details) --- */
  --sr-summary-text-color: #ffffff;   /* цвет подписи данных (текст summary) */
  --sr-summary-bg: var(--sr-blue-grad);        /* NEW: фон summary (закрыто) */
  --sr-summary-bg-open: var(--sr-blue-grad);   /* NEW: фон summary (открыто) */
}


/* =========================================================
   Simple Price Table (DIV layout) — base + themes
   ========================================================= */

/* ====== БАЗОВАЯ СЕТКА (общая для обеих тем) ====== */
.simple-price-table{
  max-width: 820px;
  margin: 20px auto;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.simple-price-table .price-header,
.simple-price-table .price-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.simple-price-table .service-name{
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.simple-price-table .service-price{
  flex: 0 0 clamp(110px, 20%, 180px);
  white-space: nowrap;
  padding-left: 0;
}

.simple-price-table .service-price.is-number{ text-align: right; }
.simple-price-table .service-price.is-text{ text-align: center; }

/* поиск */
.simple-price-table .spt-search{ margin:10px 0 20px; }
.simple-price-table .spt-search input:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ====== СВЕТЛАЯ ТЕМА (жёлтый вариант) ====== */
.simple-price-table.spt-theme-light .price-header{
  font-weight: 700;
  font-size: 17px;
  border-bottom: 2px solid #e6dca8; /* тёплая жёлтая линия */
  margin-bottom: 8px;
  padding: 6px 12px;
  color:#111;
  background: #fffdf2;
}

.simple-price-table.spt-theme-light .price-row{
  padding: 6px 12px;
  border-bottom:1px solid #efe4b5; /* жёлтая линия разметки */
}

/* zebra */
.simple-price-table.spt-theme-light .price-row:nth-child(odd){ background:#ffffff; }
.simple-price-table.spt-theme-light .price-row:nth-child(even){ background:#fffbe8; }

/* поиск */
.simple-price-table.spt-theme-light .spt-search input{
  width:100%;
  padding:8px 10px;
  border:1px solid #e6dca8;
  border-radius:3px;
  background:#fffdf2;
  color:#222;
}

/* ====== СИНЯЯ ТЕМА (в стиле карточки) — правка оттенков ====== */
.simple-price-table.spt-theme-blue{
  color: var(--sr-text);
  background: #ffffff;
}

/* базовый “голубой” для строк данных (even) */
.simple-price-table.spt-theme-blue{
  --spt-blue-row: #eef2ff;     /* голубая строка данных */
  --spt-blue-h1:  #cfd7ff;     /* +1 тон (темнее) */
  --spt-blue-h2:  #a7b3ff;     /* +2 тона */
  --spt-blue-h3:  #334ad1;     /* +3 тона (заголовок) */
}

/* header: ВОЗВРАТ как было (через переменную шапки) */
.simple-price-table.spt-theme-blue .price-header{
  font-weight: 700;
  font-size: 17px;

  background: var(--sr-table-header-bg);
  color: var(--sr-table-header-text);

  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 10px;
}

/* строки */
.simple-price-table.spt-theme-blue .price-row{
  padding: 8px 12px;
  border-bottom: 1px solid rgba(61, 82, 160, 0.25);
}

.simple-price-table.spt-theme-blue .price-row:nth-child(odd){ background:#ffffff; }
.simple-price-table.spt-theme-blue .price-row:nth-child(even){ background: var(--spt-blue-row); }

.simple-price-table.spt-theme-blue .service-price{
  color: var(--sr-price);
  font-weight: 600;
}

.simple-price-table.spt-theme-blue .service-price.is-text{
  color: rgba(31,31,31,0.85);
  font-weight: 500;
}

/* =========================================================
   Service Registry — Collapsible Price (details/summary)
   (вернули ширину кнопки "как было": без форса 100%)
   ========================================================= */

.entry-content .sr-price-wrapper{
  max-width: var(--sr-price-maxw, 820px);
  margin: 20px auto;
  display: block;
}

/* details — фиксируем ширину, чтобы summary не прыгал */
.entry-content .sr-price-wrapper .sr-price-toggle{
  margin: 0;
  width: 100%;          /* фикс ширины контейнера */
  display: block;
}

/* summary — всегда одинаковой ширины */
.entry-content .sr-price-wrapper .sr-price-summary{
  width: 100%;                /* фикс: больше не меняется ширина */
  box-sizing: border-box;

  cursor: pointer;
  user-select: none;

  display: flex;              /* важно: не list-item */
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: var(--sr-toggle-pad-y, 12px) var(--sr-toggle-pad-x, 14px);
  border-radius: var(--sr-toggle-radius, 10px);

  background: var(--sr-summary-bg);
  color: var(--sr-summary-text-color);
  border: 1px solid var(--sr-toggle-border, rgba(0,0,0,0.18));
  box-shadow: var(--sr-toggle-shadow, none);

  font-weight: 700;
  line-height: 1.25;
}

/* защита от темы: summary не должен становиться list-item */
.entry-content .sr-price-wrapper summary.sr-price-summary{
  display: flex;
}

/* =========================================================
   SR FIX: summary/details не должны сжиматься по содержимому
   Причина: тема/редактор может задавать details/summary inline/fit-content
   Решение: жёстко фиксируем display/width/min-width + убираем ограничения
   ========================================================= */

.entry-content .sr-price-wrapper{
  display: block !important;
  width: 100% !important;           /* wrapper всегда 100% своей колонки */
  max-width: var(--sr-price-maxw, 820px) !important;
  box-sizing: border-box !important;
}

.entry-content .sr-price-wrapper details.sr-price-toggle{
  display: block !important;        /* details не inline */
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}

.entry-content .sr-price-wrapper summary.sr-price-summary{
  display: flex !important;         /* не list-item / не inline */
  width: 100% !important;           /* ключ: ширина фикс */
  min-width: 100% !important;       /* ключ: не ужиматься */
  max-width: none !important;       /* убираем возможный max-width темы */
  box-sizing: border-box !important;

  /* на всякий случай: если тема ставит fit-content/inline-size */
  inline-size: 100% !important;
}



.entry-content .sr-price-wrapper .sr-price-summary::-webkit-details-marker{ display:none; }
.entry-content .sr-price-wrapper .sr-price-summary::marker{ content:""; }

.entry-content .sr-price-wrapper .sr-price-summary::after{
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  margin-left: auto;

  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  opacity: 0.95;
}

/* open: фон через отдельную переменную */
.entry-content .sr-price-wrapper .sr-price-toggle[open] > .sr-price-summary{
  background: var(--sr-summary-bg-open);
  border-color: var(--sr-toggle-border-open, rgba(0,0,0,0.24));
}
.entry-content .sr-price-wrapper .sr-price-toggle[open] > .sr-price-summary::after{
  transform: rotate(-135deg);
}

.entry-content .sr-price-wrapper .sr-price-summary:focus-visible{
  outline: 2px solid var(--sr-toggle-focus, var(--sr-blue-bottom));
  outline-offset: 3px;
}

.entry-content .sr-price-wrapper .sr-price-content{
  margin-top: 14px;
}

@media (prefers-reduced-motion: reduce){
  .entry-content .sr-price-wrapper .sr-price-summary::after{ transition: none; }
}

/* =========================================================
   Modifiers (если у тебя в PHP проставляются классы)
   Здесь не трогаем лишние константы, только summary-bg
   ========================================================= */

/* Light */
.entry-content .sr-price-wrapper--light{
  --sr-summary-text-color: #111;
  --sr-summary-bg: #fff7d6;
  --sr-summary-bg-open: #ffefb5;
}

/* Blue */
.entry-content .sr-price-wrapper--blue{
  --sr-summary-text-color: #fff;
  --sr-summary-bg: var(--sr-blue-grad);
  --sr-summary-bg-open: var(--sr-blue-grad);
}

	/* =========================================================
   Service Registry — Product Card (адаптивная карточка)
   Задача:
   - единый набор токенов для карточек услуг
   - адаптивные отступы и шрифты: vw fallback + cqw при поддержке
   - карточка заполняет высоту ячейки грида, кнопка прижата вниз
   ========================================================= */

/* ---------------------------------------------------------
   Токены карточки (глобальные переменные)
   --------------------------------------------------------- */
:root{
  /* Геометрия карточки */
  --sr-pcard-radius: 16px;     /* скругление */
  --sr-pcard-border-w: 2px;    /* толщина рамки */

  /* Типографика заголовка */
  --sr-pcard-title-lh: 1.2;    /* line-height заголовка (важно для расчёта высоты шапки) */

  /* Адаптивные отступы: min/max */
  --sr-pcard-pad-y-min: 14px;
  --sr-pcard-pad-y-max: 22px;

  --sr-pcard-pad-x-min: 14px;
  --sr-pcard-pad-x-max: 18px;

  /* Итоговые “2 константы” (fallback: vw).
     Эти переменные используются для padding в head/body. */
  --sr-pcard-pad-y: clamp(var(--sr-pcard-pad-y-min), 2.4vw, var(--sr-pcard-pad-y-max));
  --sr-pcard-pad-x: clamp(var(--sr-pcard-pad-x-min), 2.0vw, var(--sr-pcard-pad-x-max));

  /* Вертикальные интервалы внутри карточки */
  --sr-pcard-field-gap: 0.5em;     /* “полстроки” после каждого поля */
  --sr-pcard-cta-bottom-gap: 1em;  /* отступ кнопки от низа: 1 строка */

  /* Адаптивная типографика (min/max) */
  --sr-pcard-title-min: 18px;
  --sr-pcard-title-max: 22px;

  --sr-pcard-price-major-min: 42px;
  --sr-pcard-price-major-max: 72px;

  --sr-pcard-price-minor-min: 14px;
  --sr-pcard-price-minor-max: 18px;

  --sr-pcard-price-currency-min: 14px;
  --sr-pcard-price-currency-max: 18px;
}

/* ---------------------------------------------------------
   Улучшение: cqw (масштабирование относительно контейнера карточки)
   Если браузер поддерживает container queries, padding становится “умнее”.
   --------------------------------------------------------- */
@supports (font-size: 1cqw){
  :root{
    --sr-pcard-pad-y: clamp(var(--sr-pcard-pad-y-min), 6.0cqw, var(--sr-pcard-pad-y-max));
    --sr-pcard-pad-x: clamp(var(--sr-pcard-pad-x-min), 5.0cqw, var(--sr-pcard-pad-x-max));
  }
}

/* ---------------------------------------------------------
   Базовый контейнер карточки
   --------------------------------------------------------- */
.sr-pcard{
  width: 100%;
  height: 100%;

  border-radius: var(--sr-pcard-radius);
  overflow: hidden;
  background: #fff;
  border: var(--sr-pcard-border-w) solid var(--sr-border);
  box-shadow: 5px 5px 12px var(--sr-shadow);

  display: flex;
  flex-direction: column;
  min-height: 0;

  /* Включаем container queries для cqw */
  container-type: inline-size;
}

/* ---------------------------------------------------------
   Шапка карточки (заголовок)
   - фон: общий синий градиент
   - высота: минимум на 3 строки заголовка + паддинги
   --------------------------------------------------------- */
.sr-pcard__head{
  background: var(--sr-blue-grad);
  padding: var(--sr-pcard-pad-y) var(--sr-pcard-pad-x);

  min-height: calc(3 * var(--sr-pcard-title-lh) * 1em + (2 * var(--sr-pcard-pad-y)));

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

.sr-pcard__title{
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: var(--sr-pcard-title-lh);

  /* fallback: vw */
  font-size: clamp(var(--sr-pcard-title-min), 2.2vw, var(--sr-pcard-title-max));
}

/* Если есть cqw — подстраиваем заголовок “от контейнера карточки” */
@supports (font-size: 1cqw){
  .sr-pcard__title{
    font-size: clamp(var(--sr-pcard-title-min), 5.2cqw, var(--sr-pcard-title-max));
  }
}

/* ---------------------------------------------------------
   Тело карточки
   --------------------------------------------------------- */
.sr-pcard__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  padding: var(--sr-pcard-pad-y) var(--sr-pcard-pad-x);
  text-align: center;
  color: var(--sr-text);

  min-height: 0;
}

/* ---------------------------------------------------------
   Блок цены (₽ + целая часть + копейки)
   --------------------------------------------------------- */
.sr-pcard__price{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: var(--sr-pcard-field-gap);

  color: var(--sr-price);
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

.sr-pcard__currency{
  margin-right: 6px;
  transform: translateY(0.35em);

  font-size: clamp(var(--sr-pcard-price-currency-min), 2.2vw, var(--sr-pcard-price-currency-max));
}

.sr-pcard__major{
  letter-spacing: -0.02em;

  font-size: clamp(var(--sr-pcard-price-major-min), 6vw, var(--sr-pcard-price-major-max));
}

.sr-pcard__minor{
  margin-left: 6px;
  transform: translateY(0.6em);
  opacity: 0.9;

  font-size: clamp(var(--sr-pcard-price-minor-min), 2.2vw, var(--sr-pcard-price-minor-max));
}

/* Если есть cqw — делаем типографику от контейнера */
@supports (font-size: 1cqw){
  .sr-pcard__currency{
    font-size: clamp(var(--sr-pcard-price-currency-min), 4.6cqw, var(--sr-pcard-price-currency-max));
  }
  .sr-pcard__major{
    font-size: clamp(var(--sr-pcard-price-major-min), 18cqw, var(--sr-pcard-price-major-max));
  }
  .sr-pcard__minor{
    font-size: clamp(var(--sr-pcard-price-minor-min), 4.6cqw, var(--sr-pcard-price-minor-max));
  }
}

/* ---------------------------------------------------------
   Примечания (срок/важное/доп. комментарии)
   --------------------------------------------------------- */
.sr-pcard__time{
  margin-bottom: var(--sr-pcard-field-gap);
  font-size: 15px;
  color: var(--sr-blue); /* legacy solid */
}

.sr-pcard__note{
  font-size: 16px;
  line-height: 1.55;
  color: var(--sr-text);
  margin-bottom: var(--sr-pcard-field-gap);
}

.sr-pcard__note--head{ font-weight: 600; }
.sr-pcard__note--secondary{ margin-bottom: var(--sr-pcard-field-gap); }

.sr-pcard__sep{
  border: 0;
  border-top: 1px solid rgba(0,0,0,0.12);
  margin: 0 0 var(--sr-pcard-field-gap);
}

/* ---------------------------------------------------------
   CTA: зона кнопки
   - margin-top:auto прижимает её вниз (важно для одинаковой высоты карточек)
   --------------------------------------------------------- */
.sr-pcard__ctaWrap{
  margin-top: auto;
  padding-bottom: var(--sr-pcard-cta-bottom-gap);
}

.sr-pcard__cta{
  display: inline-block;
  padding: 12px 18px;
  background: var(--sr-cta-bg);
  color: var(--sr-cta-text);
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
}

.sr-pcard__cta:hover{ opacity: 0.92; }


/* =========================================================
   Service Registry — Card: Price Blue (legacy fixed size)
   Назначение:
   - старая фиксированная карточка 360x520
   - оставляем до полного перехода на .sr-pcard
   ========================================================= */

:root{
  --sr-card-w: 360px;
  --sr-card-h: 520px;
  --sr-card-radius: 16px;
  --sr-card-border-w: 2px;

  --sr-card-field-gap: 0.5em;
  --sr-card-cta-bottom-gap: 1em;

  --sr-card-title-size: 22px;
  --sr-card-title-lh: 1.2;
}

.sr-card--priceblue{
  max-width: var(--sr-card-w);
  height: var(--sr-card-h);
  border-radius: var(--sr-card-radius);
  overflow: hidden;
  background: #fff;
  border: var(--sr-card-border-w) solid var(--sr-border);
  box-shadow: 5px 5px 12px var(--sr-shadow);

  display: flex;
  flex-direction: column;
}

/* Шапка legacy карточки: тот же градиент */
.sr-card--priceblue .sr-card__head{
  background: var(--sr-blue-grad);
  padding: 22px 18px;

  min-height: calc(3 * var(--sr-card-title-lh) * 1em + 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sr-card--priceblue .sr-card__title{
  margin: 0;
  color: #fff;
  font-size: var(--sr-card-title-size);
  font-weight: 400;
  line-height: var(--sr-card-title-lh);
}

.sr-card--priceblue .sr-card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  padding: 22px 18px 26px;
  text-align: center;
  color: var(--sr-text);
}

.sr-card--priceblue .sr-card__price{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: var(--sr-card-field-gap);

  color: var(--sr-price);
  font-weight: 400;
  line-height: 1;
}

.sr-card--priceblue .sr-card__currency{
  font-size: 18px;
  margin-right: 6px;
  transform: translateY(6px);
}

.sr-card--priceblue .sr-card__major{
  font-size: 72px;
  letter-spacing: -1px;
}

.sr-card--priceblue .sr-card__minor{
  font-size: 18px;
  margin-left: 6px;
  transform: translateY(10px);
  opacity: 0.9;
}

.sr-card--priceblue .sr-card__time{
  margin-bottom: var(--sr-card-field-gap);
  font-size: 15px;
  color: var(--sr-blue);
}

/* Примечания legacy карточки */
.sr-card--priceblue .sr-card__note{
  font-size: 16px;
  line-height: 1.55;
  color: var(--sr-text);
  margin-bottom: var(--sr-card-field-gap);
}

/* ВАША ПРАВКА:
   Для "заголовка примечания" добавляем отступ сверху и снизу
   равный высоте строки (1em) */
.sr-card--priceblue .sr-card__note--head{
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 1em;
}

.sr-card--priceblue .sr-card__note--secondary{ margin-bottom: var(--sr-card-field-gap); }

.sr-card--priceblue .sr-card__ctaWrap{
  margin-top: auto;
  padding-bottom: var(--sr-card-cta-bottom-gap);
}

.sr-card--priceblue .sr-card__cta{
  display: inline-block;
  padding: 12px 18px;
  background: var(--sr-cta-bg);
  color: var(--sr-cta-text);
  text-decoration: none;
  font-weight: 700;
  border-radius: 6px;
}

.sr-card--priceblue .sr-card__cta:hover{ opacity: 0.92; }

/* =========================================================
   Service Registry — Cards Row (сетка карточек без Stackable)
   Назначение:
   - раскладывает карточки в адаптивный грид
   - одинаковая высота карточек в строке
   - карточка занимает всю высоту ячейки
   ========================================================= */

:root{
  --sr-cards-gap: 24px;   /* расстояние между карточками */
  --sr-cards-min: 260px;  /* минимальная ширина карточки перед переносом */
}

/* Контейнер сетки */
.sr-cards-row{
  display: grid;
  gap: var(--sr-cards-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--sr-cards-min), 1fr));
  align-items: stretch; /* растягиваем элементы по высоте строки */
}

/* Обёртка каждой карточки внутри грида */
.sr-cards-row__item{
  min-width: 0;  /* важно для переносов и предотвращения переполнения */
  height: 100%;
  display: flex; /* чтобы внутренняя карточка могла занять 100% высоты */
}

/* Сами карточки — на всю ширину/высоту ячейки */
.sr-cards-row__item > .sr-pcard,
.sr-cards-row__item > .sr-card--priceblue{
  width: 100%;
  height: 100%;
}

/* =========================================================
   FIX: CTA внутри новой карточки .sr-pcard
   (ссылка приходит как <a class="sr-card__cta" ...>)
   ========================================================= */

.entry-content .sr-pcard .sr-pcard__ctaWrap > a.sr-card__cta{
  display: inline-block !important;
  padding: 12px 18px !important;

  background: var(--sr-cta-bg) !important;
  color: var(--sr-cta-text) !important;

  text-decoration: none !important;
  font-weight: 700 !important;

  border-radius: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* visited часто ломает цвет */
.entry-content .sr-pcard .sr-pcard__ctaWrap > a.sr-card__cta:visited{
  color: var(--sr-cta-text) !important;
}

/* hover/focus */
.entry-content .sr-pcard .sr-pcard__ctaWrap > a.sr-card__cta:hover,
.entry-content .sr-pcard .sr-pcard__ctaWrap > a.sr-card__cta:focus{
  opacity: 0.92;
  text-decoration: none !important;
}

.entry-content .sr-pcard .sr-pcard__ctaWrap > a.sr-card__cta:focus-visible{
  outline: 2px solid var(--sr-blue-bottom);
  outline-offset: 3px;
}