/* ===== PLG Flooring · светла минималистична тема ===== */
:root{
    --bg:#ffffff;          /* чисто бяло */
    --bg-2:#f6f5f4;
    --panel:#ffffff;
    --panel-2:#f4f3f1;
    --line:#e3e1de;        /* фина сива линия */
    --ink:#141414;         /* почти черно */
    --ink-dim:#8a8784;     /* приглушено сиво */
    --accent:#1a1a1a;      /* черен акцент (бранд) */
    --accent-2:#000000;
    --accent-deep:#000000;
    --brand-grey:#ccc9c7;  /* сивото от логото PLG */
    --good:#3f7d54;
    --bad:#b3463a;
    --r:14px;
    --shadow:0 12px 36px -16px rgba(0,0,0,.18);
    --font-d:"Fraunces", Georgia, serif;
    --font-b:"Hanken Grotesk", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
    font-family:var(--font-b);
    background:
        linear-gradient(180deg, #fafafa 0%, #ffffff 30%),
        var(--bg);
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    line-height:1.5;
}
/* фина зърнеста текстура (едва доловима на светъл фон) */
.grain{
    position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:2}

/* ===== Лента отгоре ===== */
.topbar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding:1rem clamp(1rem,4vw,2.4rem);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:40;
    background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;transition:opacity .15s}
.brand:hover{opacity:.7}
.brand-logo{height:40px;width:auto;display:block}
.brand-divider{width:1px;height:32px;background:var(--line)}
.brand h1{font-family:var(--font-d);font-weight:500;font-size:1.15rem;letter-spacing:-.01em;line-height:1.05}
.brand p{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);margin-top:.3rem}
.steps{display:flex;gap:.3rem;flex-wrap:wrap}
.step{
    font-size:.74rem;letter-spacing:.02em;color:var(--ink-dim);
    padding:.42rem .85rem;border-radius:999px;border:1px solid transparent;white-space:nowrap;
    transition:.25s;
}
.step.is-active{color:#fff;background:var(--accent);font-weight:600}
.step.is-done{color:var(--ink);border-color:var(--line)}
.step.is-done::before{content:"✓ ";color:var(--good)}

.alert{
    margin:1rem clamp(1rem,4vw,2.4rem);padding:.9rem 1.1rem;border-radius:12px;
    background:#fdf3f1;border:1px solid #f0d2cc;color:#8a3327;font-size:.9rem;
}
.alert code{background:#00000010;padding:.1em .4em;border-radius:5px}

/* ===== Оформление ===== */
.layout{
    display:grid;grid-template-columns:1fr 340px;gap:clamp(1rem,2.5vw,2rem);
    padding:clamp(1rem,3vw,2.2rem) clamp(1rem,4vw,2.4rem);
    align-items:start;max-width:1500px;margin:0 auto;
}
@media (max-width:900px){
    .layout{grid-template-columns:1fr}
    .controls-col{order:2}
}

/* ===== Дропзона ===== */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.dropzone{
    position:relative;
    min-height:min(58vh,460px);border-radius:var(--r);cursor:pointer;
    display:grid;place-items:center;text-align:center;padding:2rem;
    border:2px dashed var(--line);transition:.25s;
    background:
        repeating-linear-gradient(90deg,transparent 0 38px,rgba(20,20,20,.018) 38px 40px),
        var(--panel-2);
}
.dropzone:hover,.dropzone:focus,.dropzone.drag{border-color:var(--accent);background:var(--bg-2)}
.dz-icon{font-size:2.6rem;color:var(--ink);display:block}
.dz-title{font-family:var(--font-d);font-size:1.35rem;margin:.7rem 0 .35rem}
.dz-sub{color:var(--ink-dim);font-size:.85rem}
/* съобщение за качване вътре в дропзоната */
.dz-status{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;background:var(--panel-2);border-radius:calc(var(--r) - 2px);text-align:center;padding:1rem;z-index:5}
.dz-status p{font-family:var(--font-d);font-size:1.15rem;color:var(--ink);margin:0}
.dz-status .spinner{width:46px;height:46px;border:4px solid var(--line);border-top-color:var(--accent)}

/* ===== Галерия / модал / toast ===== */
.gallery-btn{
    font-family:var(--font-b);font-weight:600;font-size:.8rem;color:var(--ink);
    background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.5rem .9rem;cursor:pointer;transition:.18s;white-space:nowrap;
}
.gallery-btn:hover{border-color:var(--accent);color:var(--accent-2)}
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:1rem;background:rgba(20,20,20,.45);backdrop-filter:blur(5px)}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);width:min(820px,100%);max-height:85vh;overflow:auto;padding:1.4rem}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-head h2{font-family:var(--font-d);font-weight:500;font-size:1.3rem}
.modal-close{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:1rem}
.modal-close:hover{border-color:var(--accent)}
.modal-sub{color:var(--ink-dim);font-size:.82rem;margin:.4rem 0 1.1rem}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.gitem{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2)}
.gitem img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;cursor:pointer}
.gitem-bar{display:flex;gap:.3rem;padding:.4rem}
.gitem-bar button{flex:1;font-size:.72rem;padding:.4rem;border-radius:7px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);cursor:pointer;transition:.15s}
.gitem-bar button:hover{border-color:var(--accent);color:var(--ink)}
.gitem-bar .del:hover{border-color:var(--bad);color:var(--bad)}
.gallery-empty{color:var(--ink-dim);text-align:center;padding:2.5rem 1rem}
.toast{position:fixed;left:50%;bottom:2rem;transform:translateX(-50%);z-index:70;background:var(--accent);color:#fff;font-weight:600;padding:.7rem 1.2rem;border-radius:999px;box-shadow:var(--shadow);font-size:.88rem;animation:toastin .25s ease}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== Режими (AI / Ръчно) ===== */
.modebar{display:flex;gap:.5rem;margin-bottom:.6rem;padding:.3rem}
.mode-btn{
    flex:1;font-family:var(--font-b);font-weight:600;font-size:.86rem;color:var(--ink-dim);
    background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:.6rem;cursor:pointer;transition:.18s;
}
.mode-btn.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.mask-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:fill}
.autobar{padding:.7rem .3rem .2rem;text-align:center}
.btn.slim{padding:.7rem 1.1rem;font-size:.92rem;width:auto;display:inline-flex}
.autoprogress{color:var(--ink-dim);font-size:.8rem;margin-top:.5rem;min-height:1em}

/* ===== Сцена / редактор на пода ===== */
.stage-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.6rem;box-shadow:var(--shadow)}
.stage{position:relative;line-height:0;border-radius:calc(var(--r) - 4px);overflow:hidden;touch-action:none;background:var(--bg-2)}
.stage img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#quad{fill:rgba(26,26,26,.12);stroke:#fff;stroke-width:2;stroke-dasharray:7 6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 1px rgba(0,0,0,.6))}
.handle{
    position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
    background:#fff;border:4px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45);
    cursor:grab;touch-action:none;padding:0;z-index:5;transition:transform .08s, opacity .2s;
}
.handle::after{content:"";position:absolute;inset:-16px} /* по-голяма зона за пръст */
.handle:active{cursor:grabbing;transform:scale(1.3);background:var(--accent);border-color:#fff}
/* В авто-режим: маркерите са по-малки и полупрозрачни, понеже AI вече е свършил
   основната работа. Стават по-видими при hover/touch. */
body.mode-auto .handle{width:20px;height:20px;margin:-10px 0 0 -10px;border-width:3px;opacity:.55}
body.mode-auto .handle:hover,body.mode-auto .handle:active{opacity:1;transform:scale(1.25)}
body.mode-auto #quad{stroke-opacity:.4;fill:rgba(26,26,26,.05)}
.hint{color:var(--ink-dim);font-size:.82rem;text-align:center;padding:.7rem .5rem .3rem}

/* ===== Резултат + сравнение ===== */
.result-stage{position:relative;border-radius:calc(var(--r) - 4px);overflow:hidden;line-height:0;touch-action:none;cursor:ns-resize;user-select:none}
.result-stage img{width:100%;height:auto;display:block;-webkit-user-drag:none}
/* двата образа наслагани; горният (СЛЕД=нов под) се реже хоризонтално с clip-path */
.result-stage #beforeImg{position:relative;z-index:1}
.after-clip{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;will-change:clip-path}
.after-clip img{width:100%;height:100%;object-fit:cover}
/* хоризонтална разделителна линия, която се движи нагоре/надолу */
.cmp-divider-v{position:absolute;left:0;right:0;top:85%;height:3px;background:var(--accent-2);z-index:3;transform:translateY(-50%);pointer-events:none}
.cmp-handle{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:50%;background:#fff;border:3px solid var(--accent);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--accent);
    box-shadow:0 3px 12px rgba(0,0,0,.3);pointer-events:none;line-height:1;
}
.compare-label{position:absolute;font-size:.66rem;letter-spacing:.18em;background:#000000aa;color:#fff;padding:.45rem .75rem;border-radius:999px;z-index:4;pointer-events:none}
.compare-label.top{top:1.2rem;left:1.2rem}
.compare-label.bottom{bottom:1.2rem;left:1.2rem}
.result-actions{display:flex;gap:.6rem;flex-wrap:wrap;padding:.7rem .3rem 0}
#productLinkBtn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Контроли ===== */
.controls-col{display:flex;flex-direction:column;gap:1rem;position:sticky;top:1rem}
@media (max-width:900px){.controls-col{position:static}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem;box-shadow:var(--shadow)}
.card h2{font-family:var(--font-d);font-weight:500;font-size:1.1rem;margin-bottom:.9rem}
.card-hint{font-size:.8rem;color:var(--ink-dim);margin:-.4rem 0 1rem;line-height:1.4}

/* филтър по категории */
.cat-filter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.cat-chip{
    font-family:var(--font-b);font-size:.78rem;font-weight:600;color:var(--ink-dim);
    background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
    padding:.4rem .8rem;cursor:pointer;transition:.15s;white-space:nowrap;
}
.cat-chip:hover{color:var(--ink);border-color:var(--ink-dim)}
.cat-chip.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}

.swatches{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
    max-height:340px;overflow-y:auto;overflow-x:hidden;
    /* padding отдясно: място за scrollbar-а + малка дистанция от ръба */
    padding:.3rem 14px .3rem 0;
    box-sizing:border-box;
    /* плавен скрол + индикация за повече съдържание долу */
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 24px),transparent 100%);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 24px),transparent 100%);
}
.swatches::-webkit-scrollbar{width:6px}
.swatches::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.swatches::-webkit-scrollbar-thumb:hover{background:var(--ink-dim)}
.swatch{
    background:none;border:2px solid transparent;border-radius:12px;padding:0;cursor:pointer;
    display:flex;flex-direction:column;gap:.35rem;align-items:center;text-align:center;
    transition:.18s;color:var(--ink-dim);
}
.swatch:hover{color:var(--ink)}
.swatch.selected{border-color:var(--accent)}
.swatch[hidden]{display:none !important}
.sw-img{
    width:100%;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);
    display:block;overflow:hidden;position:relative;background:var(--bg-2);
}
.sw-img img{
    width:100%;height:100%;object-fit:cover;display:block;
    opacity:0;transition:opacity .25s ease;
}
.sw-img img.loaded{opacity:1}
/* placeholder с лек скелетон ефект, докато се зарежда */
.sw-img::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,var(--bg-2) 0%,#eeece8 50%,var(--bg-2) 100%);
    background-size:200% 100%;animation:skeleton 1.4s ease-in-out infinite;
    opacity:1;transition:opacity .25s ease;
}
.sw-img:has(img.loaded)::before{opacity:0}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}
.swatches-count{font-size:.74rem;color:var(--ink-dim);text-align:right;margin-top:.5rem;padding-right:.3rem}
.sw-label{font-size:.68rem;line-height:1.2}
.swatch.selected .sw-label{color:var(--ink);font-weight:700}

.control{margin-bottom:1.05rem}
.control:last-child{margin-bottom:0}
.control label{display:flex;justify-content:space-between;align-items:baseline;font-size:.82rem;color:var(--ink-dim);margin-bottom:.5rem}
.control output{color:var(--accent-2);font-weight:600;font-variant-numeric:tabular-nums}
input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
    background:linear-gradient(90deg,var(--accent-deep),var(--accent));outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent-deep);box-shadow:0 2px 6px rgba(0,0,0,.4)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent-deep)}

/* ===== Бутони ===== */
.btn{
    font-family:var(--font-b);font-weight:600;font-size:.95rem;border-radius:12px;
    padding:.9rem 1.2rem;cursor:pointer;border:1px solid var(--line);transition:.2s;
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none;color:var(--ink);background:var(--panel-2);
}
.btn:hover{border-color:var(--accent)}
.btn.primary{
    width:100%;background:var(--accent);color:#fff;
    border:none;font-size:1.02rem;padding:1.05rem;box-shadow:0 10px 26px -10px var(--accent-deep);
}
.btn.primary:hover{background:#000}
.btn.primary:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.btn.ghost{flex:1}
.status{text-align:center;font-size:.82rem;color:var(--ink-dim);min-height:1.2em}
.status.err{color:var(--bad)}
.status.ok{color:var(--good)}

/* ===== Футър (бранд) ===== */
.foot{color:var(--ink-dim);font-size:.85rem;border-top:1px solid var(--line);margin-top:2rem;background:var(--bg-2)}
.foot-grid{
    display:flex;flex-wrap:wrap;gap:2rem;
    display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;
    max-width:1500px;margin:0 auto;padding:2.6rem clamp(1rem,4vw,2.4rem) 1.8rem;
}
.foot-brand{flex:1 1 240px;min-width:220px}
.foot-col{flex:1 1 150px;min-width:140px}
.foot-brand p{margin:.9rem 0 1.1rem;line-height:1.6;max-width:34ch}
.foot-logo{height:38px;width:auto;display:block}
.foot-cta{
    display:inline-flex;align-items:center;font-weight:600;color:#fff;background:var(--accent);
    padding:.6rem 1.1rem;border-radius:10px;text-decoration:none;transition:.18s;font-size:.88rem;
}
.foot-cta:hover{background:#000}
.foot-col h3{font-family:var(--font-d);font-weight:500;font-size:.95rem;color:var(--ink);margin-bottom:.9rem}
.foot-col a,.foot-social a{display:block;color:var(--ink-dim);text-decoration:none;padding:.28rem 0;transition:.15s}
.foot-col a:hover,.foot-social a:hover{color:var(--ink)}
.foot-addr{display:block;color:var(--ink-dim);line-height:1.6;margin:.28rem 0 .8rem}
.foot-social{display:flex;gap:1rem}
.foot-social a{padding:0}
.foot-bottom{
    display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    max-width:1500px;margin:0 auto;padding:1.1rem clamp(1rem,4vw,2.4rem);
    border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-dim);
}
@media (max-width:760px){
    .foot-grid{grid-template-columns:1fr 1fr;gap:1.6rem}
    .foot-brand{grid-column:1 / -1}
    .foot-bottom{flex-direction:column;text-align:center}
}
@media (max-width:440px){.foot-grid{grid-template-columns:1fr}}

/* ===== Хедър действия ===== */
.topbar-actions{display:flex;align-items:center;gap:.6rem}
.site-link{
    font-family:var(--font-b);font-weight:600;font-size:.8rem;color:var(--ink-dim);text-decoration:none;
    padding:.5rem .85rem;border-radius:999px;border:1px solid transparent;transition:.18s;white-space:nowrap;
}
.site-link:hover{color:var(--ink);border-color:var(--line)}
@media (max-width:560px){.site-link{display:none}}

/* ===== Зареждане ===== */
.overlay-loading{position:fixed;inset:0;z-index:50;display:grid;place-items:center;gap:1rem;background:rgba(255,255,255,.82);backdrop-filter:blur(4px);color:var(--ink)}
/* hidden атрибутът винаги печели над display от класовете */
[hidden]{display:none !important}
.overlay-loading p{font-family:var(--font-d);font-size:1.1rem}
.spinner{width:54px;height:54px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:560px){
    .swatches{grid-template-columns:repeat(2,1fr)}
    .steps{display:none}
    .brand h1{font-size:1.3rem}
}