/* ================= Rimsky Relax — Partner page ================= */


:root{ --header-h:72px; }           /* подгони под свою шапку */
/* Палитра + контейнер секции */
.rr-partner{
  --bg:#0f1216; --fg:#eef2f6; --muted:#b7c1cf; --accent:#d6b07a; --card:#151a20;
  --hero-bg:url('/wp-content/uploads/2025/08/Partnyorskaya-programma.webp');
  --hero-pos:center 40%;
  color:var(--fg); background:var(--bg);
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  max-width:980px; margin:0 auto;
  position:relative; z-index:0;
  margin-top: calc(var(--header-h) + 10px); /* реальный зазор под шапкой */
}

/* ===== HERO ===== */
.rrp-hero{
  position:relative; isolation:isolate;
  margin-top: 0;
  padding-top: 0;                 
  min-height:70vh;
  display:grid; place-items:center;
  text-align:center;
}
.rrp-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,10,12,.55), rgba(8,10,12,.78)),
    var(--hero-bg) var(--hero-pos)/cover no-repeat;
}
/* ВАЖНО: у тебя внутри hero обычный <div>, без классов */
.rrp-hero > div{ position:relative; z-index:1; padding:42px 20px; max-width:980px }

.rrp-eyebrow{letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--accent); margin-bottom:8px; opacity:.95}
.rrp-title{font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 10px}
.rrp-sub{color:var(--muted); font-size:clamp(14px,2.2vw,18px)}

/* Кнопки в Hero */
.rrp-hero .rrp-cta{ display:flex; gap:12px; justify-content:center; margin-top:10px; }
.rrp-hero .rrbtn{ min-width:220px; }


/* ===== KPI + Cards + Grid ===== */
.rrp-wrap{padding:28px 22px}
.rrp-grid{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.rrp-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:18px; grid-column: 1 / -1}
.rrp-badge{display:inline-flex; gap:8px; align-items:center; font-weight:700; padding:6px 10px; border-radius:999px;
  background:rgba(214,176,122,.12); color:var(--accent); border:1px solid rgba(214,176,122,.25); font-size:14px}
.rrp-h2{font-size:22px; margin:.2rem 0 .6rem; grid-column: 1 / -1; margin-top: 18px /* если нужен именно отступ */}
.rrp-h3{font-size:18px; margin:.2rem 0 .4rem; color:var(--muted)}
.rrp-list{margin:.4rem 0 0; padding-left:18px}
.rrp-list li{margin:.35rem 0}

.rrp-kpis{gap:12px; margin-top:-26px}
.rrp-kpi{grid-column:span 4}
.rrp-kpi .val{font-size:28px; font-weight:800}
.rrp-kpi .cap{color:var(--muted); font-size:13px}

.rrp-cols > .rrp-card{grid-column:span 6}

.rrp-steps{grid-column:span 12}
.rrp-steps ol{counter-reset:step; list-style:none; padding:0; margin:0}
.rrp-steps li{
  counter-increment:step; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:12px 0; border-top:1px solid rgba(255,255,255,.06)
}
.rrp-steps li:first-child{border-top:none}
.rrp-steps li::before{
  content:counter(step); display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  background:rgba(214,176,122,.18); color:var(--accent); font-weight:800; border:1px solid rgba(214,176,122,.28)
}

.rrp-note{grid-column:span 12; background:linear-gradient(180deg, rgba(214,176,122,.12), transparent); border:1px dashed rgba(214,176,122,.35)}
.rrp-faq > .rrp-card{grid-column:span 6}

/* ===== Мобилка: фон + сетка ===== */
@media (max-width: 640px){ :root{ --header-h:64px; }
  .rr-partner{
    --hero-bg:url('/wp-content/uploads/2025/08/Partnyorskaya-programma-mobile.webp');
    --hero-pos:center 55%;
  }
  .rrp-kpi{grid-column:span 6}
  .rrp-cols > .rrp-card{grid-column:span 12}
  .rrp-faq > .rrp-card{grid-column:span 12}
}


/* Маленький стиль для бейджа (опционально) */
.rr-ref-badge{
  width:max-content; margin:8px auto 0; padding:6px 10px;
  font-size:12px; color:#b7c1cf;
  background:rgba(214,176,122,.12);
  border:1px solid rgba(214,176,122,.25);
  border-radius:999px;
}

/* Заголовок формы как на «Контактах» */
.rr-form-title{
  display:inline-block;
  background:rgba(214,176,122,.14);
  border:1px solid rgba(214,176,122,.35);
  color:#e9cfa0; /* чуть теплее акцент */
  font-weight:700; letter-spacing:.2px;
  padding:8px 14px; border-radius:12px;
  margin:0 0 12px 0;
}

/* --- Desktop-polish: секция «Стать партнёром» --- */
#rrp-join { margin-top: 18px; }

/* Карточка с кнопками: чуть больше внутреннего отступа */
#rrp-join .rrp-card:first-of-type { padding: 20px 22px; }

/* Заголовок формы-бейдж — влево, без лишней «ступеньки» */
#rrp-join-form .rr-form-title { 
  margin-left: 0; display: inline-block;
}

/* Карточка формы: убрать двойной блик, сделать чище */
#rrp-join-form.rrp-card{
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.01), transparent), var(--card);
}

/* Поля формы — единый стиль */
#rrp-join-form input[type="text"],
#rrp-join-form input[type="tel"],
#rrp-join-form input[type="email"],
#rrp-join-form textarea,
#rrp-join-form select{
  width: 100%;
  border: 1px solid rgba(233,207,160,.35);
  background: rgba(233,207,160,.05);
  color: var(--fg);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#rrp-join-form input::placeholder,
#rrp-join-form textarea::placeholder{ color: #c9cfd9; opacity:.6; }

#rrp-join-form input:focus,
#rrp-join-form textarea:focus,
#rrp-join-form select:focus{
  border-color: rgba(214,176,122,.85);
  box-shadow: 0 0 0 4px rgba(214,176,122,.18);
  background: rgba(233,207,160,.08);
}

/* Кнопка отправки формы — как твои CTA */
#rrp-join-form button[type="submit"],
#rrp-join-form input[type="submit"]{
  background: var(--accent);
  color: #0f1216;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(214,176,122,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
#rrp-join-form button[type="submit"]:hover,
#rrp-join-form input[type="submit"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(214,176,122,.45);
}

/* Низ секции: небольшой внешний отступ, чтобы не липло к футеру */
.rr-partner { margin-bottom: 26px; }

/* ===== Boutique CTA — железная сетка ===== */
.rr-cta-boutique{
  display: grid;
  grid-template-columns: 1fr;   /* мобилка: по одной */
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 640px){      /* планшет: 2 колонки */
  .rr-cta-boutique{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (min-width: 860px){      /* + реальный grid на десктопе */ /* десктоп/ретина 13": 3 колонки */
  .rr-cta-boutique{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr));}
}

@media (max-width: 480px){
  .rrp-hero .rrbtn{
    min-width: 160px;
    height: 46px;
    padding: 10px 14px;
  }
}

/* Кнопки заполняют свою ячейку, не «пихают» сетку */
.rr-cta-boutique .rrbtn{
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.rrbtn{
  --btn-bg: rgba(214,176,122,.14);
  --btn-br: rgba(214,176,122,.35);
  --btn-fg: #f7f2e7;
  --btn-shadow: 0 6px 18px rgba(214,176,122,.18);
  --btn-glow: 0 0 0 0 rgba(214,176,122,0);

  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 18px;
  height:52px; border-radius:14px;
  color:var(--btn-fg); text-decoration:none; font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent), var(--btn-bg);
  border:1px solid var(--btn-br);
  box-shadow: var(--btn-shadow);
  transition:.25s ease;
  backdrop-filter:saturate(120%);
}
.rrbtn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(214,176,122,.28); }
.rrbtn:focus-visible{ outline:none; box-shadow:0 0 0 6px rgba(214,176,122,.18), 0 8px 22px rgba(214,176,122,.28); }

.rrbtn__icon{ display:inline-grid; place-items:center; color:var(--btn-fg); opacity:.95 }
.rrbtn__text{ line-height:1; white-space:nowrap; }

/* Варианты */
.rrbtn--primary{
  --btn-bg: linear-gradient(180deg, rgba(247,220,168,.22), rgba(214,176,122,.20));
  --btn-br: rgba(247,220,168,.55);
  --btn-fg: #0f1216;
}
.rrbtn--secondary{
  --btn-bg: linear-gradient(180deg, rgba(200,214,232,.15), rgba(162,186,212,.12));
  --btn-br: rgba(172,194,218,.45);
  --btn-fg: #eef2f6;
}
.rrbtn--ghost{
  --btn-bg: rgba(255,255,255,.06);
  --btn-br: rgba(255,255,255,.16);
  --btn-fg: #eef2f6;
}

/* На очень широких — равные кнопки, ровная высота */
@media (min-width: 1200px){
  .rr-cta-boutique .rrbtn{ min-width: 0; }
}

.rrp-card .rr-cta-boutique {
  width: 100%;
  justify-content: space-evenly; /* равномерно растянуть */
}

/* секции сверху */
.rrp-grid {
  margin-top: 8px;
}

/* muted-текст */
.rrp-muted {
  margin: 0 0 12px;
  color: var(--muted);
}

/* ---- Партнёрка: фиксы после чистки HTML ---- */

/* Заголовки секций внутри .rrp-grid тянут колонку на всю ширину + верхний отступ */
.rr-partner .rrp-h2 {
  grid-column: 1 / -1;
  margin-top: 18px;
}

/* Базовый вертикальный ритм для секций-сеток */
.rr-partner .rrp-grid {
  margin-top: 8px;
}

/* Серая подпись (и отступ под ней) */
.rr-partner .rrp-muted {
  color: var(--muted);
  margin: 0 0 12px;
}

/* Карточки в этих сетках растягиваем на всю ширину (как было через инлайн) */
.rr-partner .rrp-grid .rrp-card {
  grid-column: 1 / -1;
}

/* Кнопочная витрина: на десктопе — в 3 колонки (WA • TG • Позвонить) */
@media (min-width: 860px) {
  .rr-partner .rr-cta-boutique {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
  }
  .rr-partner .rr-cta-boutique .rrbtn {
    width: 100%;
  }
}

/* На мобильном — две в ряд + звонок ниже по центру (опционально) */
@media (max-width: 859.98px) {
  .rr-partner .rr-cta-boutique {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .rr-partner .rr-cta-boutique .rrbtn:nth-child(3) {
    grid-column: 1 / -1; /* "Позвонить" на всю ширину */
    justify-self: center;
  }
}
/* Спрятать автопереносы редактора внутри CTA, чтобы грид не ломался */
.rr-partner .rrp-cta br,
.rr-partner .rr-cta-boutique br { display: none !important; }

/* Не зависим от nth-child: на мобиле делаем "Позвонить" на всю ширину по классу */
@media (max-width: 859.98px){
  .rr-partner .rr-cta-boutique .rrbtn--ghost { grid-column: 1 / -1; }
}

/* На десктопе гарантируем 3 колонки (WA • TG • Позвонить) */
@media (min-width: 860px){
  .rr-partner .rr-cta-boutique{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:24px;
  }
}
/* WP иногда вставляет <br> в CTA — глушим их, чтобы сетка не разваливалась */
.rr-partner .rrp-cta br,
.rr-partner .rr-cta-boutique br { display: none !important; }

/* Мобилка: не завязываемся на :nth-child — делаем «Позвонить» широкой по классу */
@media (max-width: 859.98px){
  .rr-partner .rr-cta-boutique .rrbtn--ghost { grid-column: 1 / -1; }
}
/* KPI: на широких экранах располагаем в одну строку */
@media (min-width: 860px){
  .rr-partner .rrp-kpi{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 24px;
  }
  .rr-partner .rrp-kpi .val{
    margin: 0;               /* без доп. отступов */
    white-space: nowrap;     /* 1000 &#8381; не ломаем */
  }
  .rr-partner .rrp-kpi .cap{
    margin: 0;
    font-size: 15px;         /* читаемо справа */
  }
}
/* Hero: мобильная посадка в экран */
@media (max-width: 640px){
  .rr-partner .rrp-hero{
    min-height: 56vh;             /* было 70vh */
  }
  .rr-partner .rrp-hero > div{
    padding: 24px 16px 28px;      /* меньше отступы */
  }
  .rr-partner .rrp-title{
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .rr-partner .rrp-sub{
    font-size: 14px;
  }
  .rr-partner .rrp-hero .rrbtn{
    min-width: 140px;             /* было 220px — влазят две */
    height: 48px;
    padding: 10px 14px;
  }
}
/* если редактор воткнул <br> между кнопками — игнорим */
.rr-partner .rrp-cta br,
.rr-partner .rr-cta-boutique br { display: none !important; }

/* --- HERO: укладываемся в экран на мобиле --- */
.rr-partner{ 
  /* запасные значения высоты шапки и нижней панели (если тема не задаёт) */
  --site-header-h: 64px;
  --bottom-nav-h: 64px;
}

/* компактная версия hero для узких экранов */
@media (max-width: 640px){
  .rr-partner .rrp-hero{
    /* занимаем доступную высоту экрана: маленькая vh учитывает UI браузера */
    min-height: calc(100svh - var(--site-header-h) - var(--bottom-nav-h) - 12px);
    padding: 20px 14px 22px;
  }
  .rr-partner .rrp-title{
    font-size: clamp(22px, 7.2vw, 30px);
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .rr-partner .rrp-sub{
    font-size: 14.5px;
    line-height: 1.35;
    margin-bottom: 12px;
  }
  .rr-partner .rrp-cta{
    gap: 10px;
  }
  .rr-partner .rrp-hero .rrbtn{
    min-width: 132px;   /* были слишком широкие */
    height: 44px;
    padding: 8px 12px;
  }
}

/* если редактор воткнул переносы внутри CTA — игнорим их, чтобы не рвало сетку */
.rr-partner .rrp-cta br{ display:none !important; }

/* === Контраст формы на странице партнёрки === */
.rr-partner #rrp-join-form .contact-form input[type="text"],
.rr-partner #rrp-join-form .contact-form input[type="tel"],
.rr-partner #rrp-join-form .contact-form input[type="email"],
.rr-partner #rrp-join-form .contact-form textarea {
  color: #131416;                 /* тёмный текст */
  background: #fffdfa;            /* тёплый светлый фон */
  border: 1px solid rgba(20,22,24,.25);
  outline: none;
  font-size: 16px;
  line-height: 1.35;
}

/* плейсхолдер — серый, но читабельный */
.rr-partner #rrp-join-form .contact-form input::placeholder,
.rr-partner #rrp-join-form .contact-form textarea::placeholder {
  color: #8b8f96;                 /* контрастнее прежнего */
  opacity: 1;                     /* отключаем полупрозрачность Safari */
}

/* состояние фокуса — явное */
.rr-partner #rrp-join-form .contact-form input:focus,
.rr-partner #rrp-join-form .contact-form textarea:focus {
  border-color: #d2a96f;          /* твой «золотистый» */
  box-shadow: 0 0 0 3px rgba(210,169,111,.25);
}

/* отключённые/readonly — тоже читаемые */
.rr-partner #rrp-join-form .contact-form input[readonly],
.rr-partner #rrp-join-form .contact-form input:disabled {
  color: #474b51;
  opacity: 1;                     /* снимаем возможное общее понижение */
}

/* Chrome/Android autofill — убираем бледно-желтый и делаем текст тёмным */
.rr-partner #rrp-join-form .contact-form input:-webkit-autofill,
.rr-partner #rrp-join-form .contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: #131416;
  box-shadow: 0 0 0 1000px #fffdfa inset; /* перекрыть желтый */
  transition: background-color 9999s ease-out 0s;
}

/* отступы между элементами для воздуха */
.rr-partner #rrp-join-form .contact-form label {
  display: block;
  margin: 12px 0 6px;
  color: #d7dadf;                 /* подписи остаются светлыми на тёмном фоне карточки */
}