/* ==========================================================
 * AFAFKA VIDEO.JS SKIN
 * Теплий фірмовий стиль AFAFKA
 * Для: <video class="video-js vim-css">
 * ========================================================== */

.vim-css.video-js {

  /* === AFAFKA PALETTE === */

  --afafka-bg: #452F1B;
  --afafka-brown: #5A3A23;
  --afafka-brown-hover: #7A5132;

  --afafka-text: #FFFFFF;
  --afafka-light: #FEF7EF;
  --afafka-soft: #F2E6DA;
  --afafka-border: #E2D5C8;
  --afafka-muted: #C9B9AA;

  --afafka-panel-bg: rgba(69, 47, 27, 0.62);
  --afafka-panel-bg-strong: rgba(69, 47, 27, 0.92);

  --afafka-shadow: rgba(69, 47, 27, 0.32);
  --afafka-soft-shadow: rgba(242, 230, 218, 0.20);

  background-color: #000000;
  color: var(--afafka-text);
}


/* ==========================================================
 * BIG PLAY BUTTON
 * ========================================================== */

.vim-css.video-js.vjs-has-started.vjs-paused:not(.vjs-seeking):not(.vjs-scrubbing):not(.vjs-error)
.vjs-big-play-button {
  display: block !important;
}


.vim-css.video-js .vjs-big-play-button {

  width: 2em;

  border: 1px solid rgba(242, 230, 218, 0.72);

  border-radius: 12px;

  background-color: rgba(69, 47, 27, 0.78);

  color: var(--afafka-text);

  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}


.vim-css.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.vim-css.video-js .vjs-big-play-button .vjs-svg-icon {
  color: #FFFFFF;
  fill: #FFFFFF;
}


.vim-css.video-js .vjs-big-play-button:focus,
.vim-css.video-js:hover .vjs-big-play-button {

  border-color: var(--afafka-soft);

  background-color: rgba(90, 58, 35, 0.90);

  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(242, 230, 218, 0.10);

  transform: scale(1.04);
}


/* ==========================================================
 * ICONS
 * ========================================================== */

.vim-css.video-js .vjs-control .vjs-icon-placeholder:before,
.vim-css.video-js .vjs-control .vjs-svg-icon {

  color: var(--afafka-text);
  fill: var(--afafka-text);

  transition:
    color 0.18s ease,
    fill 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}


.vim-css.video-js .vjs-control:hover .vjs-icon-placeholder:before,
.vim-css.video-js .vjs-control:focus .vjs-icon-placeholder:before,
.vim-css.video-js .vjs-control:hover .vjs-svg-icon,
.vim-css.video-js .vjs-control:focus .vjs-svg-icon {

  color: var(--afafka-soft);
  fill: var(--afafka-soft);

  text-shadow: none;

  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}


.vim-css.video-js .vjs-svg-icon:hover {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}


/* ==========================================================
 * CONTROL BAR
 * ========================================================== */

.vim-css.video-js .vjs-control-bar {

  background:
    linear-gradient(
      180deg,
      rgba(69, 47, 27, 0.38) 0%,
      rgba(69, 47, 27, 0.74) 100%
    );

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  border-top:
    1px solid rgba(242, 230, 218, 0.08);
}


/* ==========================================================
 * TIME
 * ========================================================== */

.vim-css.video-js .vjs-time-control,
.vim-css.video-js .vjs-time-divider {
  color: var(--afafka-border);
}


.vim-css.video-js .vjs-current-time,
.vim-css.video-js .vjs-duration {

  display: flex !important;

  align-items: center;
  justify-content: center;

  font-size: 1.5em;

  min-width: 3.2em;

  padding: 0 0.35em;

  color: #FFFFFF;

  font-variant-numeric: tabular-nums;
}


.vim-css.video-js .vjs-time-divider {
  display: none !important;
}


/* ==========================================================
 * PROGRESS BAR
 * ========================================================== */

.vim-css.video-js .vjs-progress-holder {

  background-color:
    rgba(242, 230, 218, 0.18);

  border-radius: 20px;
}


.vim-css.video-js .vjs-load-progress {

  background:
    rgba(226, 213, 200, 0.22);

  border-radius: 20px;
}


.vim-css.video-js .vjs-load-progress div {

  background:
    rgba(226, 213, 200, 0.30);

  border-radius: 20px;
}


.vim-css.video-js .vjs-play-progress {

  background-color:
    var(--afafka-soft);

  border-radius: 20px;
}


.vim-css.video-js .vjs-play-progress .vjs-svg-icon {

  fill: var(--afafka-light);
}


/* ==========================================================
 * SLIDERS
 * ========================================================== */

.vim-css.video-js .vjs-slider {

  background-color:
    rgba(242, 230, 218, 0.18);

  border-radius: 20px;
}


.vim-css.video-js .vjs-slider:focus {

  box-shadow:
    0 0 0 2px rgba(242, 230, 218, 0.14);

  text-shadow: none;
}


/* ==========================================================
 * VOLUME
 * ========================================================== */

.vim-css.video-js .vjs-volume-bar {

  background-color:
    rgba(242, 230, 218, 0.18);

  border-radius: 20px;
}


.vim-css.video-js .vjs-volume-level {

  background-color:
    var(--afafka-soft);

  border-radius: 20px;
}


.vim-css.video-js .vjs-volume-level .vjs-svg-icon {

  fill: var(--afafka-light);
}


/* ==========================================================
 * TOOLTIPS
 * ========================================================== */

.vim-css.video-js .vjs-time-tooltip,
.vim-css.video-js .vjs-mouse-display .vjs-time-tooltip {

  font-size: 0.9em !important;

  top: -2.7em !important;

  padding: 0.35em 0.6em;

  border-radius: 7px;

  border:
    1px solid rgba(226, 213, 200, 0.22);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.20);
}


.vim-css.video-js .vjs-time-tooltip {

  background-color:
    rgba(69, 47, 27, 0.94);

  color:
    var(--afafka-light);
}


.vim-css.video-js
.vjs-mouse-display
.vjs-time-tooltip {

  background-color:
    rgba(69, 47, 27, 0.97);

  color:
    var(--afafka-light);
}


.vim-css.video-js .vjs-volume-tooltip {

  background-color:
    rgba(69, 47, 27, 0.96);

  color:
    var(--afafka-light);

  border:
    1px solid rgba(226, 213, 200, 0.20);

  border-radius: 7px;
}


/* ==========================================================
 * MENUS
 * Playback speed / subtitles / audio
 * ========================================================== */

.vim-css.video-js .vjs-menu .vjs-menu-content {

  background-color:
    rgba(69, 47, 27, 0.96);

  border:
    1px solid rgba(226, 213, 200, 0.16);

  border-radius: 10px;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22);

  overflow: hidden;
}


.vim-css.video-js .vjs-menu li.vjs-menu-item {

  color:
    var(--afafka-light);

  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}


.vim-css.video-js .vjs-menu li.vjs-menu-item:hover,
.vim-css.video-js .vjs-menu li.vjs-menu-item:focus {

  background-color:
    rgba(242, 230, 218, 0.12);

  color:
    #FFFFFF;
}


/* Selected item */

.vim-css.video-js .vjs-menu li.vjs-selected,
.vim-css.video-js .vjs-menu li.vjs-selected:focus,
.vim-css.video-js .vjs-menu li.vjs-selected:hover {

  background-color:
    var(--afafka-soft);

  color:
    var(--afafka-bg);
}


.vim-css.video-js
.vjs-menu
li.vjs-selected
.vjs-svg-icon {

  fill:
    var(--afafka-bg);
}


/* ==========================================================
 * PLAYBACK RATE MENU
 * ========================================================== */

.vim-css.video-js .vjs-playback-rate .vjs-menu {

  width: 8em;
}


.vim-css.video-js
.vjs-playback-rate
.vjs-menu
.vjs-menu-content {

  max-height: 12em;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color:
    var(--afafka-border)
    rgba(69, 47, 27, 0.88);
}


/* Chrome / Edge / Safari */

.vim-css.video-js
.vjs-playback-rate
.vjs-menu
.vjs-menu-content::-webkit-scrollbar {

  width: 6px;
}


.vim-css.video-js
.vjs-playback-rate
.vjs-menu
.vjs-menu-content::-webkit-scrollbar-track {

  background:
    rgba(69, 47, 27, 0.88);

  border-radius: 4px;
}


.vim-css.video-js
.vjs-playback-rate
.vjs-menu
.vjs-menu-content::-webkit-scrollbar-thumb {

  background:
    var(--afafka-border);

  border-radius: 4px;
}


.vim-css.video-js
.vjs-playback-rate
.vjs-menu
.vjs-menu-content::-webkit-scrollbar-thumb:hover {

  background:
    var(--afafka-soft);
}


/* ==========================================================
 * TITLE BAR
 * ========================================================== */

.vim-css.video-js .vjs-title-bar {

  background:
    linear-gradient(
      180deg,
      rgba(69, 47, 27, 0.90) 0%,
      rgba(69, 47, 27, 0.60) 55%,
      rgba(69, 47, 27, 0) 100%
    );

  color:
    var(--afafka-light);
}


/* ==========================================================
 * LOADING SPINNER
 * ========================================================== */

.vim-css.video-js .vjs-loading-spinner {

  border-color:
    rgba(69, 47, 27, 0.56);
}


.vim-css.video-js .vjs-loading-spinner:before,
.vim-css.video-js .vjs-loading-spinner:after {

  border-top-color:
    var(--afafka-soft);
}


/* AFAFKA spinner */

@keyframes vjs-spinner-fade {

  0% {
    border-top-color:
      rgba(226, 213, 200, 0.45);
  }

  20% {
    border-top-color:
      rgba(226, 213, 200, 0.65);
  }

  35% {
    border-top-color:
      var(--afafka-soft);
  }

  60% {
    border-top-color:
      rgba(226, 213, 200, 0.65);
  }

  100% {
    border-top-color:
      rgba(226, 213, 200, 0.45);
  }
}


/* ==========================================================
 * TRACK SETTINGS BUTTONS
 * ========================================================== */

.vim-css.video-js
.vjs-track-settings-controls button {

  background:
    var(--afafka-brown);

  background-image:
    linear-gradient(
      180deg,
      var(--afafka-brown-hover) 0%,
      var(--afafka-brown) 100%
    );

  color:
    #FFFFFF;

  border:
    1px solid rgba(226, 213, 200, 0.30);

  border-radius:
    7px;

  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.14);
}


.vim-css.video-js
.vjs-track-settings-controls button:hover {

  color:
    #FFFFFF;

  background:
    var(--afafka-brown-hover);

  filter: none;
}


.vim-css.video-js
.vjs-track-settings-controls button:active,
.vim-css.video-js
.vjs-track-settings-controls button:focus {

  outline:
    2px solid var(--afafka-soft);

  outline-offset:
    2px;

  background:
    var(--afafka-brown-hover);

  color:
    #FFFFFF;
}


/* ==========================================================
 * DISABLED / MUTED
 * ========================================================== */

.vim-css.video-js .vjs-disabled {

  opacity: 0.48;
}


.vim-css.video-js .vjs-live-control,
.vim-css.video-js
.vjs-seek-to-live-control
.vjs-icon-placeholder {

  color:
    var(--afafka-muted);
}


.vim-css.video-js
.vjs-seek-to-live-control
.vjs-svg-icon {

  fill:
    var(--afafka-muted);
}


/* ==========================================================
 * CONTROL BAR ORDER
 * ========================================================== */

.vim-css.video-js
.vjs-control-bar > * {

  order: 10;
}


/* Play */

.vim-css.video-js
.vjs-play-control {

  order: 1;
}


/* Current time */

.vim-css.video-js
.vjs-current-time {

  order: 3;
}


/* Progress */

.vim-css.video-js
.vjs-progress-control {

  order: 4;
}


/* Duration */

.vim-css.video-js
.vjs-duration {

  order: 5;
}


/* Volume */

.vim-css.video-js
.vjs-volume-panel {

  order: 20;
}


/* Subtitles */

.vim-css.video-js .vjs-subs-caps-button,
.vim-css.video-js .vjs-subtitles-button,
.vim-css.video-js .vjs-captions-button,
.vim-css.video-js .vjs-descriptions-button,
.vim-css.video-js .vjs-audio-button {

  order: 22;
}


/* Playback speed */

.vim-css.video-js
.vjs-playback-rate {

  order: 24;
}


/* Picture in picture */

.vim-css.video-js
.vjs-picture-in-picture-control {

  order: 28;
}


/* Fullscreen */

.vim-css.video-js
.vjs-fullscreen-control {

  order: 30;
}


/* ==========================================================
 * EMAIL WATERMARK
 * ========================================================== */

.svg-email-watermark:empty {

  display: none;
}


.svg-wrap {

  position: relative;
}


.svg-embed-wrap {

  position: relative;
}


.svg-email-watermark {

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  padding: 0;

  border-radius: 0;

  background:
    transparent;

  font-size: 26px;

  line-height: 1.2;

  font-weight: 500;

  /*
   * Вместо серо-чёрного watermark
   * используем фирменный тёмно-коричневый.
   */

  color:
    rgba(69, 47, 27, 0.20);

  pointer-events: none;

  white-space: nowrap;

  z-index: 50;
}


/* ==========================================================
 * RESPONSIVE WATERMARK
 * ========================================================== */

@media (max-width: 1023px) {

  .svg-email-watermark {

    font-size: 22px;
  }
}


@media (max-width: 767px) {

  .svg-email-watermark {

    font-size: 18px;
  }
}


@media (max-width: 479px) {

  .svg-email-watermark {

    font-size: 14px;
  }
}