/* Van Balloons Design Wall — tool chrome (tooltips, sliders, keyframes) +
   hover/focus classes generated from the design build. */

    * { box-sizing: border-box; }
    @keyframes hbSlideUp { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes hbFade { from { opacity: 0; } to { opacity: 1; } }
    input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; margin: 0; }
    input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #EAD8BE; border-radius: 2px; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #1c1a17; border: 2.5px solid #ffffff; box-shadow: 0 0 0 1.5px #1c1a17; margin-top: -7px; cursor: pointer; }
    input[type="range"]::-moz-range-track { height: 4px; background: #EAD8BE; border-radius: 2px; }
    input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #1c1a17; border: 2.5px solid #ffffff; box-shadow: 0 0 0 1.5px #1c1a17; cursor: pointer; }
    input::placeholder, textarea::placeholder { color: #a79c8c; }
    .dwk-ic:hover { background: rgba(28,26,23,.07) !important; }
    .dwk-ic::after {
      content: attr(data-tip);
      position: absolute; bottom: calc(100% + 12px); left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #1c1a17; color: #FAE0C7;
      font: 600 12px 'Outfit', sans-serif; letter-spacing: -0.01em;
      padding: 7px 12px; border-radius: 8px; white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }
    .dwk-ic::before {
      content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%;
      transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1c1a17;
      opacity: 0; pointer-events: none; transition: opacity .18s ease;
    }
    @media (hover: hover) {
      .dwk-ic:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
      .dwk-ic:hover::before { opacity: 1; }
    }
  
.dwh0:hover { background:rgba(28,26,23,.07) !important; }
.dwh1:hover { background:#000000 !important; border-color:#000000 !important; }
.dwh2:hover { border-color:#1c1a17 !important; background:rgba(28,26,23,.06) !important; }
.dwh3:hover { border-color:#1c1a17 !important; }
.dwh4:focus { border-color:#1c1a17 !important; }
.dwh5:hover { border-color:#1c1a17 !important; background:rgba(28,26,23,.05) !important; }