/* =========================================================
   VzV 3D Print — Sticky Dock
   Enqueued on ALL frontend pages (non-logged-in users).
   Calculator.css overrides the :root variables on the
   calculator page itself with WP-theme-integrated values.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
    --vzv-dock-navy:      #15295B;
    --vzv-dock-navy-deep: #0F1F47;
    --vzv-dock-amber:     #F5B342;
    --vzv-dock-orange:    #ED5E2C;
    --vzv-dock-cream:     #F2EDE5;
    --vzv-dock-line:      #DCE0EC;
    --vzv-dock-ink-300:   #97A0BB;
    --vzv-dock-ink-500:   #5A6688;
    --vzv-dock-r-md:      10px;
    --vzv-dock-r-lg:      14px;
    --vzv-dock-display:   "Montserrat", system-ui, -apple-system, sans-serif;
    --vzv-dock-body:      "Manrope", system-ui, -apple-system, sans-serif;
}

/* On the calculator page, inherit the WP-integrated values */
.vzv-3dp { --vzv-dock-navy:  var(--vzv-brand-navy,      #15295B); }

/* ============================================================
   Dock pill
   ============================================================ */
.vzv-3dp-dock {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9999;
    background: #fff;
    color: var(--vzv-dock-navy);
    box-shadow:
        0 18px 40px -16px rgba(15,31,71,.28),
        0 2px 0 0 var(--vzv-dock-navy);
    border-radius: var(--vzv-dock-r-lg);
    font-family: var(--vzv-dock-body);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    width: 440px;
    max-width: calc(100vw - 32px);
    overflow: visible;
    animation: vzv-dock-in .3s cubic-bezier(.2,.8,.2,1);
}
.vzv-3dp-dock--hidden { display: none !important; }
.vzv-3dp-hidden        { display: none !important; }
@keyframes vzv-dock-in {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ── Status chip ──────────────────────────────────────────── */
.vzv-3dp-dock__chip {
    display: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    align-items: center; justify-content: center;
    background: var(--vzv-dock-cream);
    color: var(--vzv-dock-navy);
    border: 0;
    cursor: help;
    padding: 0;
    margin-left: -4px;
    position: relative;
}
.vzv-3dp-dock__chip svg { width: 14px; height: 14px; }

.vzv-3dp-dock-spin {
    display: block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: vzv-dock-rotate .9s linear infinite;
}
@keyframes vzv-dock-rotate { to { transform: rotate(360deg); } }

.vzv-3dp-dock[data-state="pending"] .vzv-3dp-dock__chip,
.vzv-3dp-dock[data-state="ready"]   .vzv-3dp-dock__chip {
    display: inline-flex;
}
.vzv-3dp-dock[data-state="pending"] .vzv-3dp-dock__chip {
    background: #FBF1D6;
    color: #8A5A00;
}
.vzv-3dp-dock[data-state="ready"] .vzv-3dp-dock__chip {
    background: #DCEFE2;
    color: #1F7A4E;
}

/* Tooltip — grows upward from bottom-left corner */
.vzv-3dp-dock__chip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    background: var(--vzv-dock-navy);
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--vzv-dock-r-md);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
    box-shadow: 0 8px 20px -6px rgba(15,31,71,.4);
    z-index: 1;
}
.vzv-3dp-dock__chip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 12px;
    border: 6px solid transparent;
    border-top-color: var(--vzv-dock-navy);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .14s ease, transform .14s ease;
    z-index: 1;
}
.vzv-3dp-dock__chip:hover::after,
.vzv-3dp-dock__chip:focus-visible::after,
.vzv-3dp-dock__chip:hover::before,
.vzv-3dp-dock__chip:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

/* ── Email area ───────────────────────────────────────────── */
.vzv-3dp-dock__mail { flex: 1; min-width: 0; }
.vzv-3dp-dock__form { display: flex; gap: 6px; }
.vzv-3dp-dock__input {
    flex: 1; min-width: 0;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--vzv-dock-r-md);
    border: 1.5px solid var(--vzv-dock-line);
    background: #fff;
    color: var(--vzv-dock-navy);
    font-family: var(--vzv-dock-body);
    font-weight: 500;
    font-size: 13.5px;
}
.vzv-3dp-dock__input:focus {
    outline: 2px solid var(--vzv-dock-orange);
    outline-offset: -1px;
}
.vzv-3dp-dock__send {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--vzv-dock-r-md);
    background: var(--vzv-dock-navy);
    color: #fff;
    font-family: var(--vzv-dock-display);
    font-weight: 700;
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease;
}
.vzv-3dp-dock__send:hover    { background: var(--vzv-dock-navy-deep); }
.vzv-3dp-dock__send:disabled { opacity: .6; cursor: wait; }

/* ── Confirmation row ─────────────────────────────────────── */
.vzv-3dp-dock__ok {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1F7A4E;
    font-weight: 600;
    padding: 4px 0;
    min-width: 0;
}
.vzv-3dp-dock__ok--hidden { display: none !important; }
.vzv-3dp-dock__ok svg { flex-shrink: 0; }
.vzv-3dp-dock__ok strong { color: var(--vzv-dock-navy); font-weight: 700; }
.vzv-3dp-dock__ok > span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.vzv-3dp-dock__linkish {
    background: none; border: 0; cursor: pointer;
    color: var(--vzv-dock-ink-500);
    text-decoration: underline; text-underline-offset: 3px;
    font: inherit; font-weight: 500;
    margin-left: auto; padding: 0;
    white-space: nowrap; flex-shrink: 0;
}
.vzv-3dp-dock__linkish:hover { color: var(--vzv-dock-navy); }

/* ── Return panel (non-calculator pages) ─────────────────── */
.vzv-3dp-dock__return { flex: 1; min-width: 0; }
.vzv-3dp-dock__return-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vzv-dock-ink-500);
    margin-bottom: 3px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vzv-3dp-dock__return-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--vzv-dock-display);
    color: var(--vzv-dock-navy);
    text-decoration: none;
    border-bottom: 1.5px solid var(--vzv-dock-orange);
    padding-bottom: 1px;
    transition: color .12s ease;
}
.vzv-3dp-dock__return-link:hover { color: var(--vzv-dock-orange); }

/* ── Dismiss button ───────────────────────────────────────── */
.vzv-3dp-dock__dismiss {
    background: transparent; border: 0; cursor: pointer;
    color: var(--vzv-dock-ink-300);
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.vzv-3dp-dock__dismiss:hover { color: var(--vzv-dock-navy); background: rgba(0,0,0,.05); }

/* ── Re-open pill ─────────────────────────────────────────── */
.vzv-3dp-dock-reopen {
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 9999;
    background: var(--vzv-dock-navy);
    color: var(--vzv-dock-amber);
    border: 0; cursor: pointer;
    font-family: var(--vzv-dock-display);
    font-weight: 700; font-size: 13px;
    height: 44px;
    padding: 0 16px 0 14px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 24px -10px rgba(15,31,71,.4);
    transition: transform .15s ease;
}
.vzv-3dp-dock-reopen:hover { transform: translateY(-2px); }
.vzv-3dp-dock-reopen__badge {
    background: var(--vzv-dock-orange); color: #fff;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 480px) {
    .vzv-3dp-dock { left: 12px; bottom: 12px; right: 12px; width: auto; }
    .vzv-3dp-dock-reopen { left: 12px; bottom: 12px; }
}