/* =====================================================
 ARARMEDIA VIDEO MODULE — CSS DESIGN
 ԱՎԵԼԱՑՆԵԼ ՀԻՆ CSS-Ի ՎԵՐՋՈՒՄ
===================================================== */

:root {
 --ar-video-red: #d90000;
 --ar-video-ink: #151515;
 --ar-video-muted: #737373;
 --ar-video-border: #e9e9e9;
}

/* GENERAL LAYOUT */

.ar-video-page,
.ar-vcat-page,
.ar-vsearch-page,
.ar-channels-page,
.ar-channel-page,
.ar-watch-page,
.ar-veditor-page {
 color: var(--ar-video-ink);
 font-family: "Open Sans", Arial, sans-serif;
}

.ar-video-content,
.ar-vcat-materials,
.ar-vsearch-results,
.ar-channels-list,
.ar-channel-videos {
 min-width: 0;
}

/* VIDEO LIST GRID */

.v-all-entries,
.all-entries {
 display: flex;
 flex-wrap: wrap;
 gap: 22px 18px;
 align-items: stretch;
 list-style: none;
 padding: 0;
 margin: 18px 0 25px;
 overflow: visible;
}

.v-all-entries > li.entry,
.all-entries > li.entry {
 float: none;
 flex: 0 0 calc((100% - 36px) / 3);
 width: calc((100% - 36px) / 3);
 min-width: 0;
 text-align: left;
}

/* ORIGINAL UCOZ VIDEO CARDS */

.v-entry {
 width: 100%;
 max-width: none;
 margin: 0 0 20px;
 background: #fff;
 border: 1px solid var(--ar-video-border);
 border-radius: 6px;
 overflow: hidden;
 box-shadow: 0 2px 10px rgba(0,0,0,.025);
 transition: box-shadow .2s, transform .2s;
}

.v-entry:hover {
 box-shadow: 0 8px 22px rgba(0,0,0,.09);
 transform: translateY(-2px);
}

.ve-title {
 padding: 14px 15px 0;
 margin: 0;
 min-height: 51px;
 background: none;
 font-size: 15px;
 font-weight: 800;
 line-height: 1.45;
 white-space: normal;
 overflow-wrap: anywhere;
}

.ve-title a {
 color: var(--ar-video-ink);
 text-decoration: none;
}

.ve-title a:hover {
 color: var(--ar-video-red);
}

.ve-screen {
 position: relative;
 width: 100%;
 height: auto;
 aspect-ratio: 16 / 9;
 margin: 10px 0 0;
 border-radius: 0;
 background-color: #161616;
 background-position: center;
 background-size: cover;
 overflow: hidden;
}

.ve-screen > a {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
 z-index: 2;
}

.ve-screen::before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 58px;
 height: 58px;
 background: var(--ar-video-red);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 box-shadow: 0 4px 15px rgba(0,0,0,.3);
 pointer-events: none;
}

.ve-screen::after {
 content: "";
 position: absolute;
 top: 50%;
 left: calc(50% + 3px);
 transform: translate(-50%, -50%);
 border-top: 11px solid transparent;
 border-bottom: 11px solid transparent;
 border-left: 17px solid white;
 pointer-events: none;
}

.ve-length {
 position: absolute;
 right: 10px;
 bottom: 10px;
 z-index: 3;
 padding: 4px 7px;
 background: rgba(0,0,0,.82);
 color: #fff;
 border-radius: 3px;
 font-size: 11px;
 pointer-events: none;
}

.ve-details {
 padding: 8px 13px 13px;
 color: var(--ar-video-muted);
 font-size: 12px;
}

.ve-details1,
.ve-details2 {
 padding: 7px 0;
 background: none;
}

.ve-details2 {
 border-top: 1px solid var(--ar-video-border);
}

.ve-details a {
 text-decoration: none;
}

/* ARARMEDIA CUSTOM VIDEO CARDS */

.ar-video-card,
.ar-channel-video-card {
 display: inline-block;
 vertical-align: top;
 width: calc(50% - 12px);
 margin: 0 18px 22px 0;
 border: 1px solid var(--ar-video-border);
 border-radius: 6px;
 overflow: hidden;
 background: #fff;
 box-sizing: border-box;
 transition: transform .2s, box-shadow .2s;
}

.ar-video-card:hover,
.ar-channel-video-card:hover {
 transform: translateY(-3px);
 box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.ar-video-card-image,
.ar-channel-video-image {
 display: block;
 position: relative;
 width: 100%;
 aspect-ratio: 16 / 9;
 background: #181818;
 overflow: hidden;
}

.ar-video-card-image img,
.ar-channel-video-image img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.ar-video-card-play,
.ar-channel-video-play {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 58px;
 height: 58px;
 background: var(--ar-video-red);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 box-shadow: 0 4px 18px rgba(0,0,0,.25);
}

.ar-video-card-play i,
.ar-channel-video-play i {
 margin-left: 3px;
}

.ar-video-card-duration,
.ar-channel-video-duration {
 position: absolute;
 right: 10px;
 bottom: 10px;
 background: rgba(0,0,0,.8);
 color: #fff;
 padding: 4px 7px;
 border-radius: 3px;
 font-size: 11px;
}

.ar-video-card-body,
.ar-channel-video-content {
 padding: 16px;
}

.ar-video-card-title,
.ar-channel-video-title {
 margin: 0 0 12px;
 font-size: 16px;
 line-height: 1.5;
 font-weight: 800;
 overflow-wrap: anywhere;
}

.ar-video-card-title a,
.ar-channel-video-title a {
 color: var(--ar-video-ink);
 text-decoration: none;
}

.ar-video-card-title a:hover,
.ar-channel-video-title a:hover {
 color: var(--ar-video-red);
}

.ar-video-card-info,
.ar-channel-video-date,
.ar-video-card-stats,
.ar-channel-video-stats {
 color: var(--ar-video-muted);
 font-size: 12px;
}

.ar-video-card-footer,
.ar-channel-video-footer {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 10px;
 border-top: 1px solid var(--ar-video-border);
 padding-top: 13px;
 margin-top: 14px;
}

.ar-video-card-watch,
.ar-channel-video-watch {
 color: var(--ar-video-red) !important;
 font-weight: 800;
 text-decoration: none;
 font-size: 11px;
}

/* NEW UCOZ VIDEO PREVIEW */

.uv-video-preview {
 aspect-ratio: 16 / 9;
 background-color: #151515;
 border-radius: 5px;
}

.uv-video-preview:not(.uv-chanell) {
 height: auto;
}

.uv-video-preview .uv-video-preview-link:before {
 opacity: 1;
 width: 56px;
 height: 56px;
 background: var(--ar-video-red);
 border-radius: 50%;
}

.uv-video-preview .uv-video-preview-link:after {
 opacity: 1;
 border-top: 11px solid transparent;
 border-bottom: 11px solid transparent;
 border-left: 18px solid #fff;
}

.uv-video-preview .uv-video-preview-link:hover:before,
.uv-video-preview .uv-video-preview-link:hover:after {
 opacity: 1;
}

.uv-video-title {
 font-weight: 800;
 font-size: 15px;
 line-height: 1.5;
}

.uv-video-title > a {
 color: var(--ar-video-ink);
}

.uv-video-title > a:hover {
 color: var(--ar-video-red);
}

/* VIDEO PLAYER */

.ar-watch-player,
.vep-video-block {
 max-width: 100%;
}

.ar-watch-player iframe,
.ar-watch-player video,
.vep-video-block iframe,
.vep-video-block video {
 max-width: 100%;
}

.ar-watch-player .vep-video-block {
 height: 100%;
}

.ar-watch-player .vep-playvideo {
 width: 100%;
 height: 100%;
}

.ar-watch-player .vep-playvideo img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.ar-watch-player .vep-playbutton {
 opacity: 1;
 background: var(--ar-video-red);
 border-radius: 50%;
 width: 70px;
 height: 70px;
 margin: 0;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}

.ar-watch-player .vep-playbutton:after {
 border: 0;
 border-top: 13px solid transparent;
 border-bottom: 13px solid transparent;
 border-left: 21px solid #fff;
 left: 54%;
 top: 50%;
}

.ar-watch-player .vep-playvideo:hover .vep-playbutton {
 opacity: 1;
 background: #b40000;
}

#videocontent,
#videocontent_obj {
 max-width: 100%;
}

#videocontent_obj iframe,
#videocontent_obj video {
 max-width: 100%;
}

/* CHANNEL PROFILE */

.ar-channel-profile {
 border: 1px solid var(--ar-video-border);
 background: #fafafa;
}

.ar-channel-title,
.ar-channel-section-title {
 color: var(--ar-video-ink);
}

.ar-channel-section-title {
 border-bottom: 1px solid var(--ar-video-border);
}

/* VIDEO ADD / EDIT FORM */

.ar-video-edit-form .vi-form-content2,
.ar-veditor-form .vi-form-content2 {
 padding-top: 18px;
}

.ar-video-edit-form .u-tabscont-ul {
 border: 1px solid var(--ar-video-border);
 border-radius: 5px;
 background: #fafafa;
 padding: 18px;
}

.ar-video-edit-form .video-link,
.ar-veditor-form .video-link {
 max-width: 100%;
}

.ar-video-edit-form #fast_link,
.ar-veditor-form #fast_link {
 max-width: 100%;
 min-height: 42px;
 border: 1px solid #dedede;
 padding: 9px 12px;
 border-radius: 4px;
}

.ar-video-edit-form .ui-hint,
.ar-veditor-form .ui-hint {
 color: var(--ar-video-muted);
 font-size: 12px;
 line-height: 1.6;
}

.ar-video-edit-form input:focus,
.ar-video-edit-form textarea:focus,
.ar-veditor-form input:focus,
.ar-veditor-form textarea:focus {
 border-color: var(--ar-video-red);
}

.ar-video-edit-form .ui-add-link,
.ar-veditor-form .ui-add-link {
 border-left: 3px solid var(--ar-video-red);
 background: #fafafa;
 padding: 9px 14px;
 height: auto;
}

.ar-video-edit-form .ui-add-link a,
.ar-veditor-form .ui-add-link a {
 color: #222;
}

#cats-select.open .dropdown-cats {
 z-index: 100;
}

.dropdown-cats-ul a:hover {
 background-color: var(--ar-video-red);
}

/* ACCESSIBILITY */

.ar-video-card a:focus-visible,
.ar-channel-video-card a:focus-visible,
.v-entry a:focus-visible {
 outline: 3px solid var(--ar-video-red);
 outline-offset: 3px;
}

/* TABLET */

@media (max-width: 1100px) {

 .v-all-entries > li.entry,
 .all-entries > li.entry {
 flex-basis: calc((100% - 18px) / 2);
 width: calc((100% - 18px) / 2);
 }

}

/* MOBILE */

@media (max-width: 650px) {

 .v-all-entries,
 .all-entries {
 gap: 15px;
 }

 .v-all-entries > li.entry,
 .all-entries > li.entry {
 flex: 0 0 100%;
 width: 100%;
 }

 .ar-video-card,
 .ar-channel-video-card {
 display: block;
 width: 100%;
 margin: 0 0 20px;
 }

 .ve-title {
 font-size: 15px;
 }

 .ar-watch-player .vep-playbutton {
 width: 56px;
 height: 56px;
 }

 .ar-video-edit-form .u-tabscont-ul {
 padding: 12px;
 }

}