/* OLT landing extras — ported floating widget + scroll-top from main site (index.html inline style) */

/* safety: helper class used by certs section */
.bg-cream { background: var(--bg-cream); }

/* Ported from index.html: certs, book-promo, site-footer, video-widget, scroll-top, edu */

/* ─── Scroll-to-top button ─── */
  .scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--accent);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(20, 16, 12, 0.18);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

.scroll-top[data-visible="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

.scroll-top:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

.scroll-top svg {
    width: 18px;
    height: 18px;
  }

/* ─── Floating video widget (bottom-left) ─── */
  .video-widget {
    position: fixed;
    left: 24px;
    bottom: 24px;
    width: 200px;
    height: 280px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-dark);
    box-shadow: 0 16px 40px -8px rgba(20, 16, 12, 0.32), 0 4px 12px rgba(20, 16, 12, 0.18);
    overflow: hidden;
    z-index: 55;
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

.video-widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px -10px rgba(20, 16, 12, 0.4), 0 6px 16px rgba(20, 16, 12, 0.22);
  }

.video-widget[data-open="false"] { display: none; }

.video-widget[data-revealed="false"] {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
  }

.video-widget[data-revealed="true"] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out);
  }

.video-widget__cover {
    position: absolute;
    inset: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    filter: brightness(0.92) saturate(0.95);
  }

.video-widget__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 16, 12, 0.55);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2;
    transition: background var(--dur) var(--ease);
  }

.video-widget__close:hover { background: rgba(20, 16, 12, 0.85); }

.video-widget__close svg { width: 12px; height: 12px; }

.video-widget__play {
    position: absolute;
    left: 50%;
    bottom: 56px;
    top: auto;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(200, 121, 42, 0.22), 0 8px 22px rgba(200, 121, 42, 0.45);
    transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease);
    pointer-events: none;
  }

.video-widget__play svg {
    width: 20px; height: 20px;
    margin-left: 2px;
  }

.video-widget:hover .video-widget__play {
    transform: translateX(-50%) scale(1.06);
    background: var(--accent-dark);
  }

.video-widget__label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(20, 16, 12, 0) 0%, rgba(20, 16, 12, 0.78) 60%, rgba(20, 16, 12, 0.92) 100%);
    color: #fff;
    font: 500 11px/1.2 var(--font-body);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

.video-widget__label-dot {
    color: rgba(245, 241, 236, 0.5);
  }

@media (max-width: 720px) {
/* Мобильный виджет — компактный, в нижнем левом углу.
       Учитываем safe-area для iOS Safari, чтобы не залезал под адресную строку. */
    .video-widget {
      width: 116px;
      height: 156px;
      left: 14px;
      bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      border-radius: var(--radius-sm);
    }
.video-widget__close { width: 22px; height: 22px; top: 6px; right: 6px; }
.video-widget__close svg { width: 10px; height: 10px; }
.video-widget__play {
      width: 36px; height: 36px; bottom: 34px;
      box-shadow: 0 0 0 4px rgba(200, 121, 42, 0.22), 0 6px 14px rgba(200, 121, 42, 0.45);
    }
.video-widget__play svg { width: 13px; height: 13px; }
.video-widget__label { padding: 6px 8px; font-size: 10px; letter-spacing: 1.1px; }
}