/*
  Soft gradient canvas (background) + clean “editorial e‑shop” UI.
  Goal: less “AI/glass”, more minimal (buga.cz‑like).
  Tailwind CDN is used for layout utilities; this file defines the brand skin.
*/

:root{
  --bg: #f6f6f7;
  --text: #0b0b0f;
  --muted: rgba(11,11,15,.62);
  --line: rgba(11,11,15,.12);
  --line2: rgba(11,11,15,.16);
  --paper: rgba(255,255,255,.92);
  --paperSolid: #ffffff;
  --shadow: 0 18px 60px rgba(0,0,0,.10);
  --shadow2: 0 10px 30px rgba(0,0,0,.08);
  /* Subtle rounding (more "professional" / less bubbly) */
  --radius: 12px;
  --radiusSm: 10px;
}

/* Typography */
html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Background canvas (soft rainbow mesh) */
.bg-canvas{
  position: fixed;
  inset: -18vh -18vw;
  z-index: -3;
  background-image: url("./bg-mesh.png");
  background-size: cover;
  background-position: center;
  filter: blur(46px) saturate(112%);
  opacity: .62;
  transform: translateZ(0);
}

/* extra subtle vignette + noise-ish texture */
.bg-vignette{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    radial-gradient(1100px 650px at 90% 10%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
    radial-gradient(900px 500px at 50% 100%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.40));
}

.bg-grain{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .10;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 0.6px, rgba(0,0,0,0) 0.7px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.16) 0.6px, rgba(0,0,0,0) 0.7px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.14) 0.6px, rgba(0,0,0,0) 0.7px);
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
}

/* Surfaces */
/* Buga-ish “paper” surfaces (no glass) */
.surface{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.surface-strong{
  background: var(--paperSolid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.card{
  background: var(--paperSolid);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.32rem .62rem;
  border-radius: 999px;
  font-size:.72rem;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  color: rgba(11,11,15,.70);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.68rem 1.05rem;
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  color: #fff;
  background: #111114;
  box-shadow: none;
}
.btn-primary:hover{ opacity: .92; }

.btn-ghost{
  background: #fff;
  border-color: var(--line2);
  color: rgba(11,11,15,.86);
}
.btn-ghost:hover{ background: rgba(255,255,255,.96); }

.btn-soft{
  background: rgba(255,255,255,.70);
  border-color: var(--line);
  color: rgba(11,11,15,.82);
}
.btn-soft:hover{ background: rgba(255,255,255,.60); }

/* Nav pills */
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .15rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(11,11,15,.78);
  font-weight: 520;
}
.nav-pill:hover{ color: rgba(11,11,15,.95); text-decoration: underline; text-underline-offset: 4px; }

.nav-pill.is-active{
  color: rgba(11,11,15,.96);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Links */
a.link{ text-decoration: underline; text-underline-offset: 3px; }

/* Forms */
.input{
  width: 100%;
  padding: .75rem .9rem;
  border-radius: var(--radiusSm);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  outline: none;
}
.input:focus{ border-color: rgba(11,11,15,.24); box-shadow: 0 0 0 4px rgba(11,11,15,.08); }

/* Tables in admin */
.table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table th, .table td{ padding: .75rem .85rem; border-bottom: 1px solid var(--line); font-size: .92rem; }
.table th{ text-align: left; color: rgba(11,11,15,.72); font-weight: 650; }

/* Buga-like page wrapper */
.page-wrap{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(11,11,15,.10);
  border-radius: 10px;
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
}

.page-inner{
  background: #fff;
  border-radius: 8px;
}

.logo-serif{ font-family: "Playfair Display", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; letter-spacing: -0.02em; }

/* Small utilities */
.muted{ color: var(--muted); }

/* Clamp helper (Tailwind plugin not available on CDN by default) */
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;}
.lb.hidden{display:none;}
.lb__inner{position:relative;max-width:min(1100px,96vw);max-height:90vh;}
.lb__img{display:block;max-width:96vw;max-height:90vh;border-radius:10px;box-shadow:0 30px 120px rgba(0,0,0,.35);}
.lb__close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;}
body.lb-open{overflow:hidden;}

/* Crop modal */
.crop-modal{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;}
.crop-modal__panel{width:min(980px,96vw);max-height:90vh;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 120px rgba(0,0,0,.35);}
.crop-modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(11,11,15,.10);}
.crop-modal__title{font-weight:650;}
.crop-modal__body{padding:16px;}
.crop-modal__grid{display:grid;grid-template-columns:1fr;gap:12px;}
.crop-modal__canvas{width:100%;height:min(60vh,540px);background:#f4f4f5;border:1px solid rgba(11,11,15,.10);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.crop-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;}
.crop-btn{border:1px solid rgba(11,11,15,.16);border-radius:10px;padding:10px 12px;background:#fff;font-weight:600;}
.crop-btn--primary{background:#0b0b0f;color:#fff;border-color:#0b0b0f;}
.crop-btn--ghost{background:#fff;}
.crop-modal__note{font-size:12px;color:rgba(11,11,15,.62);}