/* Only Cats — Albums UI
 * Version: 2.9.3
 * Updated: 2025-10-01
 * Единый стиль кнопок (как «Поиск»), адаптивная сетка без переполнений,
 * оверлей ▶ для GIF, стили лайтбокса.
 */

/* Buttons — как у кнопки «Поиск» */
.btn-slim, .btn-slim:visited{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 10px; border-radius:8px; border:0;
  font-size:13px; line-height:30px; cursor:pointer; text-decoration:none;
  background:#f89406; color:#fff; box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);
}
.btn-slim:hover{ filter:brightness(0.96); }
.btn-slim:active{ transform:translateY(1px); }
.btn-slim.danger{ background:#f89406; } /* все одинаковые маленькие и оранжевые */
.btn-slim:disabled{opacity:.6;cursor:not-allowed}

/* Cards / layout */
.white-card{background:#fff;border:1px solid #ffd7b3;border-radius:12px;}
.ocp-alb-top{padding:12px}
.ocp-alb-topbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ocp-alb-topbar input[type="search"]{flex:1;border:1px solid #ffd7b3;border-radius:10px;padding:8px;min-width:260px}
.ocp-alb-topbar .ocp-alb-total{margin-left:auto;color:#b28290}
.ocp-empty{padding:16px;margin-top:10px}
.ocp-alb-grid{margin-top:10px;display:grid;gap:10px}
.ocp-alb-card{padding:10px;border-radius:10px}
.ocp-alb-card-head{display:flex;gap:8px;align-items:center}
.ocp-alb-card .ocp-alb-title{margin:0;flex:1 1 auto}
.ocp-alb-card .ocp-alb-title span{color:#b28290}
.ocp-alb-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.ocp-priv{font-size:12px;color:#b28290}

/* Album page head */
#ocp-album-scope{padding:12px}
.ocp-alb-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ocp-alb-title{flex:1 0 100%;text-align:center;margin:0;font-size:18px;line-height:1.2}
.ocp-alb-title span{color:#b28290}
.ocp-alb-subbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ocp-breadcrumbs{display:flex;gap:8px;margin-top:8px;justify-content:flex-start;flex-wrap:wrap}
.ocp-hint{margin-top:6px;color:#b28290;font-size:12px;text-align:center}

/* Upload progress */
.ocp-upload-progress{margin:10px auto 0;max-width:560px}
.ocp-upload-progress .ocp-bar-wrap{height:10px;background:#ffe8f1;border-radius:8px;overflow:hidden}
.ocp-upload-progress .ocp-bar{height:10px;width:0;background:#fa993e}
.ocp-upload-progress .ocp-count{margin-top:6px;color:#b28290;font-size:12px;text-align:center}

/* Grid: N колонок по 210px, сколько влезет — без горизонтального переполнения */
.ocp-alb-items{
  display:grid;
  grid-auto-rows:auto;
  grid-template-columns: repeat(auto-fill, 210px);
  gap:16px;
  justify-content:flex-start;   /* выравнивание по левому краю */
  align-items:start;
}
.ocp-empty-grid{grid-column:1/-1;text-align:center}

/* Item card — фиксированная карточка 210×(190×130 превью) */
.ocp-card{
  width:210px; padding:8px; border-radius:10px; overflow:hidden;
  border:1px solid #ffd7b3; background:#fff; box-sizing:border-box;
}
.ocp-thumb{
  position:relative; width:190px; height:130px; margin:0 auto;
  border-radius:10px; overflow:hidden; background:#f6f6f6;
}
.ocp-thumb img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.ocp-item-actions{display:flex;gap:8px;margin-top:8px;justify-content:center;flex-wrap:wrap}

/* Prevent overflow glitch on some themes */
.ocp-card, .ocp-thumb{box-sizing:border-box}

/* Loader dots */
.ocp-dots{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:none}
.ocp-dots i{width:6px;height:6px;border-radius:50%;background:#d8c4cb;opacity:.8;animation:ocpDot .9s infinite ease-in-out}
.ocp-dots i:nth-child(2){animation-delay:.15s} .ocp-dots i:nth-child(3){animation-delay:.3s}
@keyframes ocpDot{0%,80%,100%{transform:scale(0.6);opacity:.5}40%{transform:scale(1);opacity:1}}

/* GIF badge */
.ocp-gif-badge{
  position:absolute; right:8px; bottom:8px;
  background:rgba(0,0,0,.65); color:#fff;
  border-radius:20px; padding:4px 10px; font-size:12px; line-height:1;
  pointer-events:none;
}

/* Lightbox */
#ocp-lb{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:999999}
#ocp-lb img{max-width:92vw;max-height:90vh;border-radius:10px;box-shadow:0 2px 18px rgba(0,0,0,.55);cursor:zoom-out}
#ocp-lb .nav{position:fixed;top:50%;transform:translateY(-50%);font-size:34px;color:#fff;cursor:pointer;user-select:none;padding:12px 14px;background:rgba(0,0,0,.25);border-radius:12px}
#ocp-lb .prev{left:14px} #ocp-lb .next{right:14px}
#ocp-lb .close{position:fixed;top:10px;right:14px;font-size:28px;color:#fff;cursor:pointer;padding:8px 10px;background:rgba(0,0,0,.25);border-radius:10px}
@media (max-width:640px){ #ocp-lb .nav{font-size:26px;padding:10px} }

/* Delete toast */
.ocp-del-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999}
.ocp-del-box{padding:10px 14px;border:1px dashed #ffd7b3;border-radius:10px;background:#fff5ef;color:#b24725;display:flex;gap:10px;align-items:center}
.ocp-del-count{font-variant-numeric:tabular-nums}