/* Css/glass.css - the shared "glass" look of the whole site: thin light lines, light-grey frosted boxes, soft shadows, no black buttons.
   Load it AFTER style-unified.css (index.php does; gallery_lightbox.php and the client forms load it themselves).
   Change the variables in :root and everything that uses them follows:
     - the two picture viewers (gallery_lightbox.php = client files, request_final.php = material viewer of the alternatives)   .gv-*
     - the material viewer of the price form (wtprice_c2.php)                                                                   .wfv-*
     - the page arrows at both sides of the index (home_content.php, shop_template.php)                                         .sidebar-link
     - the soft buttons of the public pages and forms                                                                            .oo-btn .submit-button .calc-btn .wf-btn ...
   Classes of the viewers: .gv overlay (+.on)  .gv-card (+.fixed fixed size, +.pdf, +.wait)  .gv-main picture / frame  .gv-x close
                           .gv-nav .p/.n arrows  .gv-cap bottom bar with .gv-t (b = title, span = second line)  .gv-btn soft button (+.sel)  .gv-sp loading text */
:root{
  --gv-backdrop: rgba(255,255,255,.78);             /* the blurred whitish layer over the page */
  --gv-backdrop-blur: 10px;
  --gv-radius: 16px;
  --gv-card-shadow: 0 10px 40px rgba(17,24,39,.13), 0 0 0 1px rgba(17,24,39,.05);
  --gv-glass: rgba(238,240,243,.62);                /* light-grey frosted boxes: arrows, close button, bottom bar (lower alpha = more transparent) */
  --gv-glass-strong: rgba(246,247,249,.90);         /* hover / buttons */
  --gv-glass-border: rgba(17,24,39,.10);
  --gv-glass-blur: 8px;
  --gv-ink: #1f2937;
  --gv-ink-soft: #6b7280;
  --gv-line: 1.15;                                  /* stroke width of the icons drawn inline (the masks below use 1.2) */
  --gv-ok: #16a34a;
  --gv-arrow-w: 32px;                               /* arrows: tall and narrow */
  --gv-arrow-h: 76px;
  --gv-z: 100001;
  /* thin icons used as CSS masks (so they take the colour of --gv-ink) */
  --gv-chev-prev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 34'%3E%3Cpath d='M10 1 2 17 10 33' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gv-chev-next: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 34'%3E%3Cpath d='M2 1 10 17 2 33' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --gv-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2 12 12M12 2 2 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* soft buttons (replace the black ones everywhere) */
  --gl-btn-bg: #f1f3f5;
  --gl-btn-bg-hover: #e6e9ed;
  --gl-btn-border: #cfd4da;
  --gl-btn-ink: #343a40;
  --gl-btn-radius: 10px;
  --gl-btn-shadow: 0 1px 2px rgba(17,24,39,.06);
}

/* ================= picture viewers (.gv) ================= */
.gv{position:fixed;inset:0;z-index:var(--gv-z);display:none;align-items:center;justify-content:center;padding:14px;background:var(--gv-backdrop);-webkit-backdrop-filter:blur(var(--gv-backdrop-blur));backdrop-filter:blur(var(--gv-backdrop-blur));font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;line-height:1.45;color:var(--gv-ink)}
.gv.on{display:flex}
.gv,.gv *{box-sizing:border-box}
.gv-card{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;border-radius:var(--gv-radius);overflow:hidden;background:transparent;box-shadow:var(--gv-card-shadow)}
.gv-card.wait{min-width:260px;min-height:180px;background:#fff}
.gv-card.fixed{width:min(1000px,100%);height:min(780px,100%);background:#fff}
.gv-card.pdf{width:min(1000px,100%);height:100%;background:#fff}
.gv-main{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;transition:opacity .18s}
.gv-main.out{opacity:0}
.gv-main img{display:block;max-width:calc(100vw - 28px);max-height:calc(100vh - 28px);width:auto;height:auto;object-fit:contain;transition:opacity .2s}
.gv-main iframe{width:100%;height:100%;border:0}
.gv-card.fixed .gv-main{width:100%;height:100%}
.gv-card.fixed .gv-main img{position:absolute;inset:0;max-width:none;max-height:none;width:100%;height:100%;object-fit:cover;object-position:center}
.gv-card.pdf .gv-main{width:100%;height:calc(100% - 50px)}
.gv-msg{color:var(--gv-ink-soft);text-align:center;padding:30px}
.gv-sp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--gv-ink-soft);font-size:13px}
/* close button: small frosted circle with a thin cross */
.gv-x{position:absolute;top:12px;right:12px;z-index:4;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--gv-glass-border);background:var(--gv-glass);-webkit-backdrop-filter:blur(var(--gv-glass-blur));backdrop-filter:blur(var(--gv-glass-blur));color:var(--gv-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.gv-x:hover{background:var(--gv-glass-strong)}
.gv-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:var(--gv-line);stroke-linecap:round}
/* arrows: tall, narrow frosted box with a tall thin chevron; they belong to the SCREEN (left / right edge), not to the picture */
.gv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:var(--gv-arrow-w);height:var(--gv-arrow-h);padding:0;border-radius:10px;border:1px solid var(--gv-glass-border);background:var(--gv-glass);-webkit-backdrop-filter:blur(var(--gv-glass-blur));backdrop-filter:blur(var(--gv-glass-blur));color:var(--gv-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.gv-nav:hover{background:var(--gv-glass-strong)}
.gv-nav svg{width:12px;height:34px;fill:none;stroke:currentColor;stroke-width:var(--gv-line);stroke-linecap:round;stroke-linejoin:round}
.gv-nav.p{left:14px}
.gv-nav.n{right:14px}
/* bottom bar: title (upper case) + second line (price, counter); frosted, lies over the bottom of the picture */
.gv-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--gv-glass);-webkit-backdrop-filter:blur(var(--gv-glass-blur));backdrop-filter:blur(var(--gv-glass-blur));border-top:1px solid var(--gv-glass-border)}
.gv-t{flex:1;min-width:0}
.gv-t b{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;color:var(--gv-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-t span{display:block;font-size:12px;color:var(--gv-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gv-t span.dn{color:var(--gv-ok);font-weight:600}
/* soft button inside the viewers */
.gv-btn{flex:0 0 auto;border:1px solid var(--gv-glass-border);background:var(--gv-glass-strong);color:var(--gv-ink);border-radius:999px;padding:8px 18px;font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:background .15s}
.gv-btn:hover{background:#fff}
.gv-btn.sel{color:var(--gv-ok);border-color:var(--gv-ok)}
@media(max-width:560px){
  .gv{padding:0}
  .gv-card{border-radius:0}
  .gv-card.fixed,.gv-card.pdf{width:100%;height:100%}
  .gv-main img{max-width:100vw;max-height:100vh}
  .gv-nav.p{left:8px}.gv-nav.n{right:8px}
}

/* ================= page arrows of the index (home_content.php, shop_template.php: <a class="sidebar-link"><span class="nav-arrow-icon">) =================
   the same frosted tall box with a thin chevron as in the viewers; the old full-height green strip and the big "<" glyph are gone */
.global-sidebar .sidebar-link,
.global-sidebar .sidebar-link:hover{background:none}
.global-sidebar .nav-arrow-icon{position:relative;display:block;width:var(--gv-arrow-w);height:var(--gv-arrow-h);font-size:0;line-height:0;transform:none;border-radius:10px;border:1px solid var(--gv-glass-border);background:var(--gv-glass);-webkit-backdrop-filter:blur(var(--gv-glass-blur));backdrop-filter:blur(var(--gv-glass-blur));transition:background .15s}
.global-sidebar .sidebar-link:hover .nav-arrow-icon{background:var(--gv-glass-strong)}
.global-sidebar .nav-arrow-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:34px;transform:translate(-50%,-50%);background:var(--gv-ink);-webkit-mask:var(--gv-chev-prev) center/contain no-repeat;mask:var(--gv-chev-prev) center/contain no-repeat}
#sidebar-right .nav-arrow-icon::after{-webkit-mask:var(--gv-chev-next) center/contain no-repeat;mask:var(--gv-chev-next) center/contain no-repeat}
/* "Eelmine / Järgmine" links under the lists on phones */
.mobile-link{border:1px solid var(--gv-glass-border);background:var(--gv-glass);border-radius:999px;padding:8px 18px;font-size:.9rem;color:var(--gv-ink)}

/* ================= soft buttons (no more black) ================= */
.oo-btn,.submit-button,.calc-btn,.wf-btn,#cookie-notice button{background:var(--gl-btn-bg);color:var(--gl-btn-ink);border:1px solid var(--gl-btn-border);border-radius:var(--gl-btn-radius);box-shadow:var(--gl-btn-shadow);font-weight:600;transition:background .15s,border-color .15s}
.oo-btn:hover,.submit-button:hover,.calc-btn:hover,.wf-btn:hover,#cookie-notice button:hover{background:var(--gl-btn-bg-hover)}
.wf-btn.alt{background:transparent;box-shadow:none}
.wf-btn.alt:hover{background:var(--gl-btn-bg)}
.wf-btn[disabled]{opacity:.45}
/* selected chips / tabs of the forms: light grey with a stronger outline instead of black */
.wf-chip.on,.wf-seg button.on,.wf-cnb.on{background:var(--gl-btn-bg-hover);color:var(--gl-btn-ink);border-color:#9aa3af}
.wf-pill{background:var(--gl-btn-bg-hover);color:var(--gl-btn-ink);border:1px solid var(--gl-btn-border)}

/* ================= material viewer of the price form (wtprice_c2.php, .wfv): same controls as the .gv viewers ================= */
.wfv-top{background:var(--gv-glass);border:1px solid var(--gv-glass-border);box-shadow:none}
.wfv-x{position:relative;width:36px;height:36px;flex:0 0 36px;border:1px solid var(--gv-glass-border);background:var(--gv-glass);color:var(--gv-ink);font-size:0}
.wfv-x::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);background:var(--gv-ink);-webkit-mask:var(--gv-cross) center/contain no-repeat;mask:var(--gv-cross) center/contain no-repeat}
.wfv-nav{width:var(--gv-arrow-w);height:var(--gv-arrow-h);border:1px solid var(--gv-glass-border);background:var(--gv-glass);-webkit-backdrop-filter:blur(var(--gv-glass-blur));backdrop-filter:blur(var(--gv-glass-blur));font-size:0;color:var(--gv-ink)}
.wfv-nav:hover{background:var(--gv-glass-strong)}
.wfv-nav::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:34px;transform:translate(-50%,-50%);background:var(--gv-ink);-webkit-mask:var(--gv-chev-prev) center/contain no-repeat;mask:var(--gv-chev-prev) center/contain no-repeat}
.wfv-nav.n::before{-webkit-mask:var(--gv-chev-next) center/contain no-repeat;mask:var(--gv-chev-next) center/contain no-repeat}
.wfv-nav.p{left:14px}.wfv-nav.n{right:14px}
.wfv-pt,.wfv-bot .wf-btn{background:var(--gv-glass-strong);color:var(--gv-ok);border:1px solid var(--gv-ok);box-shadow:none}
.wfv-chk{color:var(--gv-ok)}