/* === FrendlyPay — Paris Noir (black/gray/white) — FULL CSS === */
/* аккуратная типографика + интерактивные ховеры, плавные попапы языка/валюты */
:root{
  /* Цвета */
  --bg:#f6f7f9; --panel:#fff; --panel-2:#f9fafb; --panel-3:#f2f4f7;
  --text:#0e1116; --muted:#666c75; --muted-2:#8e95a0;
  --border:#e6e9f0; --border-strong:#d7dce6;
  --accent:#111418; --accent-2:#23272f; --accent-3:#0b0d11;
  --danger:#7f1d1d;

  /* Тени/радиусы */
  --radius:14px; --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 10px 28px rgba(0,0,0,.08);
  --shadow-lg:0 16px 44px rgba(0,0,0,.12);

  /* Размеры */
  --container:1120px;
  --header-h: 60px;
  --footer-h:56px;

  /* Типографика */
  --ff: Inter, "SF Pro Text", -apple-system, system-ui, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --lh:1.4;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:var(--ff); line-height:var(--lh);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  margin-bottom:3rem;
  margin-top: 4rem;
}

/* Контейнер и отступ с учётом фиксированного футера (с безопасной зоной iOS) */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
main{padding:20px 0 calc(var(--footer-h) + 20px + env(safe-area-inset-bottom,0px))}

.hidden{display:none}

/* ================= Header ================= */
.fp-header{
  position: fixed;      /* было: sticky */
  top: 0; left: 0; right: 0;
  z-index: 100;         /* выше футера */
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding-top: env(safe-area-inset-top, 0px); /* безопасная зона iOS */
}
.fp-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
  min-height: var(--header-h);   /* фиксируем высоту, чтобы не дёргалось */
}
.fp-logo a{color:var(--accent);text-decoration:none;font-weight:800;letter-spacing:.2px;font-size:22px}
.fp-logo a:hover{text-decoration:underline}

/* ===== Language / Currency switch ===== */
.fp-langbar{
  display:flex;
  align-items:center;
  gap:10px;           /* расстояние между «язык» и «валюта» */
  flex-wrap:nowrap;
}
.lang-switch{
  position:relative;
  display:inline-flex; /* не расползается */
}

.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#fff; color:var(--text); border:1px solid var(--border);
  height:38px; padding:0 12px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, box-shadow .2s ease, background .15s ease, border-color .15s;
  position:relative;
}
.lang-btn::after{
  content:"";
  width:10px; height:10px; margin-left:8px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"black\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"/></svg>') center/contain no-repeat;
  transition:transform .18s ease;
}
.lang-btn[aria-expanded="true"]::after{ transform:rotate(180deg); }

.lang-btn:hover{background:var(--panel-2); border-color:var(--border-strong); box-shadow:var(--shadow-md)}
.lang-btn:active{transform:translateY(1px)}
.lang-btn:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(17,20,24,.1)}

/* Поповер: плавный выезд (без display none) */
.lang-popover{
  position: fixed;
  top: 0; left: 0;
  width: auto;             /* ширину задаст JS = ширине кнопки */
  min-width: unset;        /* не мешаемся */
  max-width: 95vw;         /* страховка, если кнопка огромная */
  max-height: 70vh;        /* если пунктов много — прокрутка */
  overflow: auto;

  background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-md); padding:6px; z-index:9999;

  visibility:hidden; opacity:0; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.lang-popover.open{
  visibility:visible; opacity:1; transform:translateY(0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}

/* «ромбик»-указатель, позиция по переменной --arrow-x */
.lang-popover::before{
  content:"";
  position:absolute;
  width:12px; height:12px;
  top:-7px;                        /* чуть наезжает на поповер */
  left: var(--arrow-x, 14px);      /* JS задаёт смещение под кнопку */
  background:#fff;
  transform: rotate(45deg);
  border-left:1px solid var(--border);
  border-top:1px solid var(--border);
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
}


.lang-option{
  width:100%; text-align:left; background:#fff; color:var(--text);
  border:1px solid transparent; padding:8px 10px; border-radius:10px;
  cursor:pointer; font-weight:700; font-size:12px;
  transition:background .12s ease, border-color .12s ease;
  display:flex; align-items:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lang-option:hover{background:var(--panel-3); border-color:var(--border-strong)}
.lang-option:focus-visible{outline:0; box-shadow:0 0 0 3px rgba(15,17,21,.08)}
#fp-ad-modal .fp-close:after{
  color: #505050;
}

.heder-img-and-neme{
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.heder-img-and-neme img{
  height: 80px;
  width: auto;
}
/* ================= Cards / Tiles ================= */
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm);
  margin:16px 0;
}
h2,h3{margin:8px 0 10px}
h2{font-size:var(--fs-24); letter-spacing:.2px}
h3{font-size:var(--fs-20)}

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px; margin:10px 0;
}
.grid .tile{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .14s ease, box-shadow .2s ease, border-color .14s ease, filter .15s ease;
}
.grid .tile strong{font-size:var(--fs-16)}
.grid .tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong); filter:saturate(104%)}
.grid .tile:active{transform:translateY(-1px)}

/* ================= Buttons ================= */
#compute-btn{margin-left: 10px;}
button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  appearance:none; border:none; background:var(--accent); color:#fff;
  padding:11px 16px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .15s, transform .05s, box-shadow .2s, filter .15s;
}
button:hover{background:linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow:var(--shadow-md)}
button:active{transform:translateY(1px); filter:saturate(110%)}

.btn-secondary{
  background:#fff; color:var(--text); border:1px solid var(--border);
}
.btn-secondary:hover{background:var(--panel-2); border-color:var(--border-strong)}

.btn-ghost{
  background:transparent; color:var(--text); border:1px dashed var(--border-strong);
}
.btn-ghost:hover{background:var(--panel-2)}

.btn-danger{
  background:#fff; color:var(--danger); border:1px solid #f1d5d5;
}
.btn-danger:hover{background:#fff0f0; border-color:#e7b8b8}

/* Набор для групп кнопок (никогда не ломаются, красиво текут) */
.btn-group{display:flex; flex-wrap:wrap; gap:10px}
.btn-group > *{min-width:0}

/* ================= Forms ================= */
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:var(--fs-13);font-weight:700}
input,select,textarea{
  width:100%; min-width:0;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  outline:0; transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{border-color:#cfd6e3; box-shadow:0 0 0 3px rgba(21,24,31,.07)}

.fp-row{margin-bottom:10px}

/* Контуры блока позиции/участника: */
.fp-part-row{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));
  border:1px dashed var(--border); border-radius:14px;
  padding:12px; margin:12px 0; box-shadow:var(--shadow-sm);

  display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px;
  min-width:0;
}
.fp-part-row > .fp-row{margin:0; grid-column:span 12}
.fp-part-row > button{justify-self:start; align-self:end;}

/* Сетка для PARTICIPANTS (1) name  (2) share  (3) method  (4) card  (5) remove) */
@media (min-width:1024px){
  #participants-list .fp-part-row > .fp-row:nth-child(1){grid-column:span 7}
  #participants-list .fp-part-row > .fp-row:nth-child(2){grid-column:span 2}
  #participants-list .fp-part-row > .fp-row:nth-child(3){grid-column:span 3}
  #participants-list .fp-part-row > .fp-row:nth-child(4){grid-column:span 8}
  #participants-list .fp-part-row > button{grid-column:span 4}
  #participants-list input[type="number"]{max-width:180px}
  #participants-list select{max-width:280px}
}

/* Сетка для ITEMS (1) label  (2) amount  (3) remove) */
@media (min-width:1024px){
  #items-list .fp-part-row > .fp-row:nth-child(1){grid-column:span 8}
  #items-list .fp-part-row > .fp-row:nth-child(2){grid-column:span 3}
  #items-list .fp-part-row > button{grid-column:span 1}
  #items-list input[type="number"]{max-width:220px}
}

/* Подсказки */
.card .hint{
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:12px; padding:10px; color:var(--muted); font-size:var(--fs-13);
}

/* Шапка сессии */
.fp-session-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.fp-session-head h3{margin:0;font-weight:900}

/* ================= Results / Links ================= */
.fp-link-row{
  display:flex; align-items:center; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--border);
}
.fp-link-row:last-child{border-bottom:none}
.fp-link{word-break:break-all}

/* ================= Footer (fixed + safe area) ================= */
.fp-footer{
  position:fixed; left:0; right:0; bottom:0;
  height:79px;
  background:rgba(255,255,255,.97); border-top:1px solid var(--border);
  box-shadow:var(--shadow-sm); display:flex; align-items:center; z-index:30;
}
.fp-footer .container{display:flex; align-items:center; gap:12px}
.fp-footer .container a{color:inherit; text-decoration:none}
.fp-footer .container a:hover{text-decoration:underline}

/* ================= Toast ================= */
.fp-toast{
  position:fixed; left:50%;
  bottom:calc(var(--footer-h) + 16px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:#fff; padding:10px 14px;
  border-radius:12px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60;
  box-shadow:var(--shadow-md);
}
.fp-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ===== Tiles with image/info faces ===== */
.grid .tile{
  position: relative;
  padding: 0;                 /* важно: чтобы слои занимали весь блок */
  overflow: hidden;
  aspect-ratio: 16/10;        /* чтобы плитка имела высоту */
}

.tile-face{
  position: absolute;
  inset: 0;
}

.tile-face--image{
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity .18s ease;
}

.tile-face--info{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  /* легкая подложка, чтобы текст читался поверх фото */
  background: #fff;
  color: #313131;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.tile-title{ font-weight: 800; font-size: 16px; }
.tile-descr{ color: #313131; }

/* При .show-info — показываем текст, скрываем фото */
.grid .tile.show-info .tile-face--image{ opacity: 0; }
.grid .tile.show-info .tile-face--info{ opacity: 1; pointer-events: auto; }

/* Кнопка "i" поверх картинок */
.tile-info-btn{
  position: absolute;
  z-index: 2;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid var(--border);
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.tile-info-btn:hover{ background:#fff; box-shadow: var(--shadow-md); }

/* Фолбэк, если нет aspect-ratio (очень старые браузеры) */
/* .grid .tile { min-height: 160px; } */


/* ================= Адаптация ================= */
@media (max-width:1280px){
  .container{padding:0 16px}
  .grid{gap:14px}
}
@media (max-width:1024px){
  .card{padding:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:768px){
  main{
  padding: calc(var(--header-h) + 20px) 0
           calc(var(--footer-h) + 20px + env(safe-area-inset-bottom,0px));
  }

  .fp-part-row{gap:10px}
  #participants-list .fp-part-row > .fp-row:nth-child(1){grid-column:span 12}
  #participants-list .fp-part-row > .fp-row:nth-child(2){grid-column:span 6}
  #participants-list .fp-part-row > .fp-row:nth-child(3){grid-column:span 6}
  #participants-list .fp-part-row > .fp-row:nth-child(4){grid-column:span 12}
  #participants-list .fp-part-row > button{grid-column:span 12}

  #items-list .fp-part-row > .fp-row:nth-child(1){grid-column:span 9}
  #items-list .fp-part-row > .fp-row:nth-child(2){grid-column:span 3}
  #items-list .fp-part-row > button{grid-column:span 12}
  .fp-link-row{flex-direction: column;}
  .btn-secondary{width: 100%;}
}
@media (max-width:480px){
  .fp-header__inner{padding: 10px 18px 10px 0px;}
  .fp-langbar{margin-top: 9px;}
  .card{margin:12px 0}
  .lang-btn{padding:0 10px}
  .fp-part-row{grid-template-columns:repeat(6,1fr)}
  #items-list .fp-part-row > .fp-row:nth-child(1),
  #items-list .fp-part-row > .fp-row:nth-child(2),
  #participants-list .fp-part-row > .fp-row{grid-column:span 6}
}

/* Пользователи с reduced motion — меньше анимаций */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}