/* =========================================
   1. ORIGINAL STYLES (Restored functionality)
   ========================================= */

.has-html5video .f-html {
    width: auto !important;
    height: auto !important;
}
/* Make Fancybox use full width and center content */
.fancybox__container {
    max-width: 100dvw;
    inset: 0; 
    z-index: 999999 !important;
}

/* Force Fancybox Controls to be visible above video */
.fancybox__toolbar, 
.fancybox__nav, 
.fancybox__infobar { 
    z-index: 9999999 !important; 
    /* Removed visibility: visible so they can fade out naturally */
}

/* Ensure navigation arrows are not hidden by video player */
.fancybox__nav .carousel__button { 
    background: rgba(0,0,0,0.3); 
    border-radius: 50%; 
}
.fancybox__nav .carousel__button:hover { 
    background: rgba(0,0,0,0.7); 
}

	@media (min-width: 768px) {
	.gallery-newgal .fancybox__viewport {
        padding-bottom: 120px !important;
        padding-top: 30px !important;
    }
   .gallery-videogal .fancybox__viewport {
        padding-bottom: 120px !important;
        padding-top: 30px !important;
    }

	.gallery-videogal .fancybox__content {
		width: auto !important;
		height: auto !important;
		max-width: 90vw !important;
		max-height: 80vh !important;
	}
    .fancybox__thumbs {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 100px !important;
        z-index: 40 !important;
    }
	img.f-panzoom__content {
        border-radius: 10px !important;
    }
}

/* ITEM VIDEOS GALLERY */
#vid-item-videos { position: relative; width: 100%; display: flex; flex-direction: column; overflow: hidden;margin:0 0 20px 0;background:#2d2d2d;border-radius:3px; }
#vid-item-videos .vid-tabs {display: flex;flex-direction: row;width:100%;padding:0 10px;margin:10px 0 6px 0;}
#vid-item-videos .vid-tabs a {padding:6px 10px;border-radius:100px;background:#3d3d3d;color:#fff;font-size:13px;font-weight:600;line-height:16px;margin:0 6px 0 0;}
#vid-item-videos .vid-tabs a:hover {background:#4d4d4d;text-decoration:none;color:#fff;}
#vid-item-videos .vid-tabs a.active {background:#0d0d0d;}
#vid-item-videos .vid-inside { display: flex; flex-direction: row; flex-wrap: wrap;padding:4px 0 0 4px;}
#vid-item-videos .vid-video { flex: 0 0 calc(33.333% - 4px); margin: 0 4px 4px 0; box-sizing: border-box; background: #000; border-radius: 2px; overflow: hidden; color: #fff; position: relative; }
#vid-item-videos .vid-video .vid-assets { width: 100%;aspect-ratio: 1 / 1;display: block;position:relative; }
#vid-item-videos .vid-video .vid-assets img, #vid-item-videos .vid-video .vid-assets picture, #vid-item-videos .vid-video .vid-assets video { cursor:pointer;width: 100%; height: 100%; object-fit: contain; display: block; }
#vid-item-videos .vid-video .vid-video-preview {opacity:0;transition:0.2s;position:absolute;left:0;top:0;right:0;bottom:0;}
#vid-item-videos .vid-video.vid-playing-preview .vid-video-preview {z-index:2;}

#vid-item-videos .vid-title { padding: 5px 8px; font-size: 14px; font-weight: 600;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vid-item-videos .vid-details {padding:0 0 8px 0;display:flex;align-items: center; justify-content: space-between;}
#vid-item-videos .vid-views { padding: 0 8px; font-size: 13px; opacity: 0.8; }
#vid-item-videos .vid-likes { padding: 0 8px; font-size: 13px; opacity: 0.8;color:#fff; }
#vid-item-videos .vid-likes.liked .fa {color:#65f065;}
#vid-item-videos .vid-likes em {font-style:normal;}
#vid-item-videos .vid-likes:hover {opacity:1;text-decoration:none;}
#vid-item-videos .vid-likes:hover i {transform:scale(1.1);}
#vid-item-videos .vid-length { padding: 0 8px; font-size: 13px; opacity: 0.8; }

@media (max-width: 1024px) {
  #vid-item-videos .vid-video { flex: 0 0 calc(50% - 4px); }
}

@media (max-width: 480px) {
  #vid-item-videos .vid-video { flex: 0 0 calc(50% - 4px); }
}

/* ADD VIDEO CARD (for item owners) */
#vid-item-videos .vid-add-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  text-decoration: none;
  transition: all 0.2s ease;
  aspect-ratio: 1 / 1;
  height: 100%;
}
#vid-item-videos .vid-add-card:hover {
  background: rgba(255, 51, 102, 0.1);
  border-color: #f36;
}
#vid-item-videos .vid-add-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#vid-item-videos .vid-add-card-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease;
}
#vid-item-videos .vid-add-card:hover .vid-add-card-icon {
  background: #f36;
  color: #fff;
  transform: scale(1.1);
}
#vid-item-videos .vid-add-card-text {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
#vid-item-videos .vid-add-card:hover .vid-add-card-text {
  color: #fff;
}

/* ADD VIDEO CARD in tab-media (white theme) */
#tab-media .vid-add-card {
  background: #f8fafc !important;
  border: 2px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  min-height: 200px;
  display: flex !important;
  flex-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
}
#tab-media .vid-add-card:hover {
  background: rgba(255, 51, 102, 0.05) !important;
  border-color: #f36 !important;
}
#tab-media .vid-add-card-icon {
  background: #fff;
  color: #f36;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
#tab-media .vid-add-card:hover .vid-add-card-icon {
  background: #f36;
  color: #fff;
}
#tab-media .vid-add-card-text {
  color: #64748b;
}
#tab-media .vid-add-card:hover .vid-add-card-text {
  color: #f36;
}

/* EMPTY VIDEO CARD (for visitors when no videos) */
#vid-item-videos .vid-empty-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  aspect-ratio: 1 / 1;
  height: 100%;
  cursor: default;
}
#vid-item-videos .vid-empty-card .vid-add-card-icon {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
}
#vid-item-videos .vid-empty-card .vid-add-card-text {
  color: rgba(255, 255, 255, 0.4);
}

/* EMPTY VIDEO CARD in tab-media (white theme) */
#tab-media .vid-empty-card {
  background: #f8fafc !important;
  border: 2px dashed #e2e8f0 !important;
  border-radius: 12px !important;
  min-height: 200px;
  display: flex !important;
  flex-flow: column !important;
  align-items: center !important;
  justify-content: center !important;
  align-content: center !important;
  cursor: default;
}
#tab-media .vid-empty-card .vid-add-card-inner {
  margin: auto;
}
#tab-media .vid-empty-card .vid-add-card-icon {
  color: #64748b;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
#tab-media .vid-empty-card .vid-add-card-text {
  color: #64748b;
  font-size: 15px;
}

/* VIDEO THUMBS */
.vid-thumbs {display:block;float:left;width:100%;margin:20px 0 8px 0;}
.vid-thumbs > strong {float:left;width:100%;clear:both;font-size:15px;color:#111;line-height:18px;margin:0 0 6px 0;}
.vid-thumbs > .vid-one-thumb {display:flex;position:relative;opacity:0.8;align-items: center; overflow:hidden;justify-content: center;background:#333;float: left; width: 140px; height: 120px; margin: 0 12px 12px 0; border: 1px solid #000; border-radius: 4px;transition:0.15s;}
.vid-thumbs > .vid-one-thumb:hover {border-color:#000;box-shadow:0 1px 6px 2px rgba(0,0,0,0.2);background:#222;opacity:1;}
.vid-thumbs > .vid-one-thumb.active {border-color:#000;opacity:1;background:#222;}
.vid-thumbs > .vid-one-thumb.active:after {position:absolute;bottom:10px;right:10px;content:"";font-size: 16px;content:"\f00c"; font-weight: 900; font-family: "Font Awesome 5 Free", "FontAwesome","Font Awesome 5 Free";color:#fff;background:green;width:30px;height:30px;line-height:30px;text-align:center;border-radius:100px;}

/* COMMON UTILS */
.vid-body {display:flex;box-sizing:border-box;width:100%;clear:both;display: flex; flex-direction: column; align-content: center; align-items: center;}
.vid-body, .vid-body * {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}

.vid-row {float:left;clear:both;width:100%;margin:0 0 16px 0;}
.vid-form .vid-row-checkbox label {display:flex;align-items: center;}
.vid-form .vid-row-checkbox input[type="checkbox"] {margin:0 5px 0 0;}

.vid-videos {float:left;clear:both;width:100%;}
p.videocount {text-align: center; padding-bottom: 10px;}

.btn.post-video {
	clear:both;    
	font-size: 14px;
    color: #FFF !important;
    border-radius: 10px;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    text-decoration: none;
    border: solid 1px #f36;
    background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    font-family: "CircularXXWeb-Medium", sans-serif;
    display: block;
    width: 50%;
    margin: auto;
    padding: 12px 0px;
}
.btn.view-item {float:left;clear:none;margin:0 10px 12px 0;}

/* WIDGET */
#vid-widget {display:flex;flex-direction: column;margin:20px 0;width:100%;}
#vid-widget > .vid-title {font-size:16px;font-weight:bold;color:#111;line-height:20px;margin:0 0 8px 0;padding:0 5px;}
#vid-widget .vid-circles {display:flex;flex-direction: row;margin:0;width:100%;flex-wrap: nowrap;overflow-x:auto;padding:0 2px;align-items: center;}
#vid-widget .vid-circle {margin:0 12px 12px 0;width:auto;border-radius:200px;padding:2px;border:2px solid transparent;transition:0.2s;position:relative;}
#vid-widget .vid-circle:hover {border-color:var(--mb-color-primary, #ff2636);}

#vid-widget .vid-circle img {min-width:64px;width:64px;height:64px;object-fit:cover;border-radius:200px;}
#vid-widget .vid-circle.vid-xsmall img {min-width:36px;width:36px;height:36px;}
#vid-widget .vid-circle.vid-small img {min-width:48px;width:48px;height:48px;}
#vid-widget .vid-circle.vid-large img {min-width:96px;width:96px;height:96px;}
#vid-widget .vid-circle.vid-xlarge img {min-width:120px;width:120px;height:120px;}
#vid-widget .vid-circle.vid-xsmall, #vid-widget .vid-circle.vid-small {margin:0 8px 8px 0;}
#vid-widget .vid-circle.vid-large, #vid-widget .vid-circle.vid-xlarge {margin:0 16px 16px 0;}

#vid-widget .vid-circle.vid-new:after {animation: vid-spin 16s linear infinite;transition:0.2s;content:'';position: absolute; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 50%;top: -2px; left: -2px; border: 2px dashed #888; z-index: 1;}
#vid-widget .vid-circle.vid-new:hover:after {opacity:0;}

@keyframes vid-spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

#vid-widget .vid-circle.vid-circle-plus {margin-left:6px;width:36px;height:36px;border-color:#ff37af;display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; }
#vid-widget .vid-circle.vid-circle-plus i {font-size:16px;line-height:16px;color:#333;}
#vid-widget .vid-circle.vid-circle-plus:hover {text-decoration:none;border-color:#a50666;}
#vid-widget .vid-circle.vid-circle-plus.vid-medium {width:44px;height:44px;}
#vid-widget .vid-circle.vid-circle-plus.vid-large, #vid-widget .vid-circle.vid-circle-plus.vid-xlarge {width:64px;height:64px;}

/* ITEM VIDEOS */
#vid-item .vid-empty {float:left;clear:both;width:100%;padding:30px 20px;font-size:16px;color:#777;background:#eee;border-radius:6px;text-align:center;margin:4px 0;}
#vid-item .btn-large {margin:6px 0 0 0;}
#vid-item #vid-stories {display:flex;margin:20px 0;flex-direction: row;flex-wrap: wrap;}
#vid-item #vid-videos {display:flex;float:left;clear:both;width:100%;position:relative;gap:12px;flex-direction: row; align-items: stretch;flex-wrap: wrap; padding: 0px 15px;}

/* Note: Modern dashboard styles override these where necessary */
#vid-item .vid-one {width:calc(50% - 6px);background:#fff;float:left;position:relative;margin:0;border-radius:4px;border:1px solid #ccc;padding:12px;display:flex;flex-direction: column;}
#vid-item .vid-one:hover {box-shadow:0 2px 10px rgba(0,0,0,0.3);}
#vid-item .vid-one.vid-placeholder {background:#f0f0f0;}
#vid-item .vid-one .vid-move {position:absolute;top:1px;right:1px;width:40px;height:40px;border-radius:4px;display:flex;font-size:20px;color:#999;transition:0.2s;cursor:pointer;align-items: center; justify-content: center;}
#vid-item .vid-one .vid-move:hover {color:#666;}
#vid-item .vid-one .vid-move:active, #vid-item .vid-one .vid-move:focus {color:green;}

#vid-item .vid-one .vid-title {font-size:15px;line-height:18px;font-weight:600;margin:0 0 6px 0;padding-right:30px;}
#vid-item .vid-one .vid-stat {margin:0 0 8px 0;}
#vid-item .vid-one .vid-stat span {margin:0 8px 0 0;}
#vid-item .vid-one .vid-stat span:last-child {margin-right:0;}
#vid-item .vid-one .vid-stat i {color:#777;}
#vid-item .vid-one .vid-btns {margin:0 0 10px 0;display:flex;gap:5px;align-items: center; justify-content: space-between;}
#vid-item .vid-one .vid-btns > span {padding:4px 7px;background:#fff;color:blue;border:1px solid blue;border-radius:4px;transition:0.2s;float:left;font-weight:600;font-size:13px;line-height:16px;}
#vid-item .vid-one .vid-btns > a {padding:5px 8px;background:#e4e4e4;color:#444;border-radius:4px;transition:0.2s;float:left;font-weight:600;font-size:13px;line-height:16px;}
#vid-item .vid-one .vid-btns > a:hover {background:#d4d4d4;color:#333;text-decoration:none;}
#vid-item .vid-one .vid-res img, #vid-item .vid-one .vid-res video {border-radius:5px;width:auto;max-width:100%;height:auto;aspect-ratio: 1 / 1; object-fit: contain; background: #0d0d0d;}

@media screen and (max-width: 767px) {
  #vid-item .vid-one {width:calc(50% - 12px);}
  #vid-item .vid-one .vid-res img, #vid-item .vid-one .vid-res video {max-width:unset;width:100%;}
}

#vid-item .vid-one .mb-status {font-weight:bold;text-decoration:underline;}
#vid-item .vid-one .mb-status.mb-st-0 {color:#001cd9;}
#vid-item .vid-one .mb-status.mb-st-2 {color:#00aa0f;}
#vid-item .vid-one .mb-status.mb-st-9 {color:#b40000;}

/* USER VIDEOS LIST VIEW */
#vid-user {}
#vid-user .vid-empty {width:100%;padding:30px 20px;font-size:16px;color:#777;background:#eee;border-radius:6px;text-align:center;margin:4px 0;}
#vid-user #vid-items {width:100%;clear:both;display:flex;margin:20px 0;flex-direction: row;flex-wrap: wrap;}
#vid-user .vid-one {width:100%;padding:6px 10px;font-size:14px;border-bottom:1px solid #ccc;display:flex;flex-direction: row;justify-content: space-evenly;align-items: center;text-align:left;}
#vid-user .vid-one:first-child {border-top:1px solid #ccc;}
#vid-user .vid-one .vid-title {font-weight:600;width:50%;font-size:15px;line-height:18px;}
#vid-user .vid-one .vid-title em {font-style:italic;color:#777;font-weight:normal;}
#vid-user .vid-one .vid-count {width:20%;text-align:center;line-height:18px;}
#vid-user .vid-one .vid-btns {width:30%;}
#vid-user .vid-one .vid-btns a.btn {font-size:14px;padding:4px 8px;height:auto;min-height:unset;float:right;margin:0;}

/* USER PROFILE */
.vid-prof {display:inline-block;clear:both;width:100%;margin:0;padding:10px 15px 15px 15px;border:1px solid #ddd;}
.vid-prof .vid-inside {float:left;display:block;clear:both;width:100%;margin:0px 0 10px 0;border:1px solid rgba(0,0,0,0.08);box-shadow:2px 2px 10px rgba(0,0,0,0.05);border-radius:3px;padding:20px;background:#fff;}
.vid-prof .vid-inside h2 {font-size:20px;margin:0 0 5px 0;}
.vid-prof .vid-inside h3 {font-size:16px;margin:0 0 10px 0;}
.vid-list {float:left;clear:both;width:100%;margin:20px 0;}
.vid-notification {background: #fff; font-weight: normal; margin: 8px 0 18px 0; padding: 12px 12px 12px 54px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; line-height: 18px; box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); position: relative; }
.vid-notification:before {position: absolute; width: 44px; height: calc(100% + 2px); left: -1px; top: -1px; z-index: 2; background: #6f8af0; border-radius: 3px 0 0 3px; content: "";}
.vid-notification:after {position: absolute; width: 44px; height: 20px; line-height: 20px; left: -1px; top: calc(50% - 1px); margin-top: -10px; text-shadow: 0 1px 4px rgb(0 0 0 / 20%); z-index: 3; content: "\f05a"; font-size: 16px; font-weight: 900; font-family: "Font Awesome 5 Free", "FontAwesome","Font Awesome 5 Free"; text-align: center; color: rgba(255,255,255,0.85);}
.vid-errors {width:100%;clear:both;margin:0 0 20px 0;}
.vid-errors:empty {display:none;}
.vid-error {background: #fff; font-weight: normal; margin: 8px 0 18px 0; padding: 12px 12px 12px 54px; border: 1px solid #ddd; border-radius: 3px; font-size: 14px; line-height: 18px; box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); position: relative; }
.vid-error:before {position: absolute; width: 44px; height: calc(100% + 2px); left: -1px; top: -1px; z-index: 2; background: #e30000; border-radius: 3px 0 0 3px; content: "";}
.vid-error:after {position: absolute; width: 44px; height: 20px; line-height: 20px; left: -1px; top: calc(50% - 1px); margin-top: -10px; text-shadow: 0 1px 4px rgb(0 0 0 / 20%); z-index: 3; content: "\f06a"; font-size: 16px; font-weight: 900; font-family: "Font Awesome 5 Free", "FontAwesome","Font Awesome 5 Free"; text-align: center; color: rgba(255,255,255,0.85);}

.vid-content {float:left;clear:both;width:100%;min-height:320px;padding:0 0 10px;}

.vid-form, .vid-form form, .vid-form .vid-row, .vid-form .vid-row label, .vid-form .vid-help {float:left;clear:both;width:100%;}
.vid-form {display:inline-block;width:100%;}
.vid-form .vid-row {margin:0 0 20px 0;}
.vid-form .vid-row:last-child {margin:0;}
.vid-form .vid-row label {margin:0 0 4px 0;font-weight:bold;font-size:14px;line-height:18px;}
.vid-form .vid-row input[type="text"] {float:left;width:100%;max-width:100%;margin:0;font-size:16px;padding:0 10px;height:44px;line-height:44px; background-color: #F8F8F8;border: solid 1px #bfbfbf;border-radius: 10px;}
.vid-form .vid-row .vid-help {margin:4px 0 0 0;font-size:13px;color:#888;line-height:15px;width:4800px;max-width:100%;}
.vid-form .vid-button {    float: left;
    font-size: 14px;
    padding: 12px 25px;
    height: auto;
    max-height: unset;
    background: linear-gradient(to right, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
    border-radius: 10px;
    cursor: pointer;
    border: none;
    line-height: 18px;
    outline: none;
    box-shadow: none;
    margin: 10px 0 4px 0;
    transition: 0.1s;
    color: #fff;
    text-decoration: none;
    width: 100%;
    text-transform: uppercase;
    font-family: "CircularXXWeb-Medium", sans-serif;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.vid-form .vid-button:hover {background: #F42156 !important;color:#fff;text-decoration:none;}
.vid-form .vid-uploaded-file {margin:0 0 20px 0;}
.vid-form .vid-uploaded-file:empty {display:none;}
.vid-form .vid-uploaded-file .vid-res-one {max-width:360px;clear:both;display:flex;flex-direction:column;align-items: flex-start;width:auto;padding:12px;border:1px solid #ccc;border-radius:4px;margin:4px 0 0 0;}
.vid-form .vid-uploaded-file .vid-res-one .vid-res-file-name {font-size:14px;font-weight:600;margin:0 0 6px 0;}
.vid-form .vid-uploaded-file .vid-res-one a.vid-upload-delete {padding:3px 8px;margin:3px 0;background:#d4d4d4;color:#444;border-radius:4px;transition:0.2s;float:left;font-weight:600;font-size:13px;line-height:16px;}
.vid-form .vid-uploaded-file .vid-res-one a.vid-upload-delete:hover {background:#c4c4c4;color:#333;text-decoration:none;}
.vid-form .vid-uploaded-file .vid-res-one .vid-res-img-vid {margin:10px 0 0 0;}
.vid-form .vid-uploaded-file .vid-res-one .vid-res-img-vid img, .vid-form .vid-uploaded-file .vid-res-one .vid-res-img-vid video {display:inline-block;height:auto;width:auto;max-width:100%;}

/* CHECKBOX */
.vid-body input[type="checkbox"] {float: left; background: #fbfbfb; border: 1px solid #7e8993; border-radius: 4px; color: #555; clear: none; cursor: pointer; display: inline-block; line-height: 0; height: 18px;min-height:18px; margin: 0 8px 0 0!important; outline: 0; padding: 0!important; text-align: center; vertical-align: middle; width: 18px; min-width: 18px; -webkit-appearance: none; box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%); transition: .05s border-color ease-in-out;}
.vid-body input[type="checkbox"]:checked::before {content: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%231e8cbe%27%2F%3E%3C%2Fsvg%3E); margin: -3px; height: 22px; width: 22px;display:inline-block;}
.vid-body input[type="checkbox"] + label {font-weight:normal;line-height:18px;display:inline-block;font-size:14px;float:left;width:auto;clear:none;}
.vid-row-check {float:left;width:100%;margin:0 0 8px 0;}
label.vid-row-check {cursor:pointer;}
.vid-row-check label {float:left;width:auto;clear:none;max-width:calc(100% - 50px);margin:0;}
.vid-row-check label strong, .vid-row-check > div > strong {display:inline-block;width:100%;font-size:15px;font-weight:bold;color:#000;}
.vid-row-check label span, .vid-row-check > div > span {display:inline-block;font-weight:normal;width:100%;font-size:14px;color:#777;line-height:16px;}
.vid-row-check > div > strong em {font-weight:normal;font-size:13px;font-style:normal;}

/* SCROLL */
.vid-nice-scroll {scrollbar-width:thin;scrollbar-color: #aaa #fff;}
.vid-nice-scroll::-webkit-scrollbar {box-shadow: none;width: 10px;height:10px;background:transparent;border-radius:100px;}
.vid-nice-scroll::-webkit-scrollbar-thumb {border-radius:100px;background-color: rgba(0,0,0,0.3);background-clip: initial;box-shadow: none;}
.vid-nice-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0,0.6);}

/* FILE */
.vid-body input[type=file] {font-size:14px;line-height:16px;padding:5px;border:1px solid #ccc;border-radius:6px;background:#f4f4f4}
.vid-body input[type=file]::file-selector-button {margin-right: 12px;border: none;background: #000;padding: 8px 16px;border-radius: 6px;font-size: 14px;line-height:16px;color: #fff;cursor: pointer;transition: background .2s ease-in-out;}
.vid-body input[type=file]::file-selector-button:hover {background: #333;}

/* TIPPED */
body .tpd-size-large .tpd-content, body .tpd-size-large .tpd-title {font-size:13px;line-height:16px;padding:8px 8px;text-align:center;}

@media screen and (max-width: 480px) {
  body.user-custom .fix_col { height: 50px !important; }
  #vid-item .vid-one {width:100%;}
  #vid-user .vid-one {position:relative;padding-right:120px;flex-direction: column;}
  #vid-user .vid-one .vid-title {width:100%;font-size:16px;line-height:20px;}
  #vid-user .vid-one .vid-count {width:100%;text-align:left;margin:0px 0 0 0;}
  #vid-user .vid-one .vid-btns {width:120px;position:absolute;right:0;top:calc(50% - 14px);}
}


/* =========================================
   2. MODERN DASHBOARD STYLES (New UI)
   ========================================= */

:root {
    --vid-slate-50: #f8fafc;
    --vid-slate-100: #f1f5f9;
    --vid-slate-200: #e2e8f0;
    --vid-slate-300: #cbd5e1;
    --vid-slate-400: #94a3b8;
    --vid-slate-500: #64748b;
    --vid-slate-800: #1e293b;
    --vid-slate-900: #0f172a;
    --vid-rose-50: #fff1f2;
    --vid-rose-500: #f43f5e;
    --vid-rose-600: #e11d48;
    --vid-emerald-100: #d1fae5;
    --vid-emerald-600: #059669;
    --vid-rose-100: #ffe4e6;
    --vid-white: #ffffff;
    --vid-radius: 16px;
    --vid-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --vid-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.vid-modern-dashboard {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--vid-slate-900);
    width: 100%;
    background: transparent;
    box-sizing: border-box;
}

.vid-modern-dashboard * { box-sizing: border-box; }

/* --- Header & Titles --- */
.vid-main-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--vid-slate-900);
    margin: 0 0 4px 0;
    letter-spacing: -1px;
    line-height: 1.1;
    text-shadow: none !important;
}

.vid-sub-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--vid-slate-800);
    margin: 0;
    display: flex;
    align-items: center;
}

.vid-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    margin-bottom: 35px;
    flex-wrap: wrap;
    gap: 20px;
}

.vid-header-content { flex: 1; min-width: 200px; }

.vid-subtitle {
    color: var(--vid-slate-500);
    margin: 0;
    font-size: 15px;
    font-weight: 400;
}

.vid-header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    align-items: center;
}

.vid-mobile-action { display: none !important; margin-bottom: 24px; }

/* --- Buttons --- */
.vid-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap;
}

.vid-btn:hover { text-decoration: none; transform: translateY(-2px); }

.vid-btn-primary {
    background: var(--vid-rose-500);
    color: var(--vid-white) !important;
    box-shadow: 0 4px 6px rgba(244, 63, 94, 0.25);
}

.vid-btn-primary:hover { background: var(--vid-rose-600); box-shadow: 0 8px 15px rgba(244, 63, 94, 0.3); }

.vid-btn-secondary {
    background: var(--vid-white);
    color: var(--vid-slate-500) !important;
    border: 1px solid var(--vid-slate-200);
}

.vid-btn-secondary:hover { 
    background: var(--vid-slate-50); 
    color: var(--vid-slate-800) !important; 
    border-color: var(--vid-slate-300);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vid-btn-full { width: 100%; justify-content: center; padding: 14px; font-size: 16px; }
.vid-btn-lg { padding: 14px 28px; font-size: 16px; }

/* --- Stats Grid --- */
.vid-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2rem;
    margin-top: 0;
}

.vid-stat-card {
    background: var(--vid-white);
    padding: 1.25rem 1.5rem;
    border-radius: var(--vid-radius);
    box-shadow: var(--vid-shadow);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid var(--vid-slate-100);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    position: relative;
    overflow: hidden;
}

.vid-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vid-shadow-hover);
    border-color: var(--vid-slate-200);
}

.vid-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.vid-icon-emerald { background: var(--vid-emerald-100); color: var(--vid-emerald-600); }
.vid-icon-rose { background: var(--vid-rose-100); color: var(--vid-rose-600); }

.vid-stat-info { display: flex; flex-direction: column; justify-content: center; }
.vid-stat-label { font-size: 13px; color: var(--vid-slate-500); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-family: "CircularXXWeb-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.vid-stat-value { font-size: 28px; font-weight: 800; color: var(--vid-slate-900); line-height: 1;     font-family: "CircularXXWeb-Medium", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

.vid-stat-quota { display: block; }
.vid-quota-header { display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center; }
.vid-progress-track { background: var(--vid-slate-100); height: 10px; border-radius: 100px; overflow: hidden; }
.vid-progress-fill { background: linear-gradient(90deg, #6366f1, #a855f7); height: 100%; border-radius: 100px; transition: width 0.8s ease-out; }

/* --- Video Grid --- */
.vid-section-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vid-count-badge { 
    background: var(--vid-slate-100); 
    color: var(--vid-slate-600); 
    padding: 4px 12px; 
    border-radius: 100px; 
    font-size: 13px; 
    vertical-align: middle; 
    margin-left: 10px; 
    font-weight: 600; 
}

.vid-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Force override any inherited float/width from old .vid-one styles */
.vid-modern-dashboard .vid-card.vid-one {
    width: 100%; /* In grid, items fill the cell */
    float: none;
    margin: 0;
    max-width: 100%;
}

.vid-card {
    background: var(--vid-white);
    border-radius: var(--vid-radius);
    overflow: hidden;
    box-shadow: var(--vid-shadow);
    transition: all 0.2s ease;
    border: 1px solid var(--vid-slate-100);
    display: flex;
    flex-direction: column;
    position: relative;
}

.vid-card:hover { transform: translateY(-4px); box-shadow: var(--vid-shadow-hover); border-color: var(--vid-slate-200); }

/* ---- FIXED 16:9 ASPECT RATIO (YouTube Standard) ---- */
.vid-card-thumb {
    position: relative;
    width: 100%;
    /* Enforce 16:9 aspect ratio (9 / 16 = 0.5625) */
    padding-bottom: 56.25%; 
    height: 0;
    background: #000;
    overflow: hidden;
    display: block;
}

/* Ensure images cover the area, but videos (if shown inline) are contained to not crop */
.vid-card-thumb img, .vid-res {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Thumbnails should fill */
    display: block;
    border: none;
}

.vid-card-thumb video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Videos should NOT be cropped */
    display: block;
    border: none;
}

/* PLAY OVERLAY */
.vid-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border: 2px solid #fff;
    opacity: 0.8;
    transition: all 0.2s;
    z-index: 5;
    pointer-events: none; /* Let click pass through to link */
}
.vid-card-thumb:hover .vid-play-overlay {
    opacity: 1;
    background: var(--vid-rose-500);
    border-color: var(--vid-rose-500);
    transform: translate(-50%, -50%) scale(1.1);
}
.vid-play-overlay i { margin-left: 2px; /* Visual centering adjustment for play icon */ }


.vid-thumb-overlay { position: absolute; top: 10px; left: 10px; z-index: 2; }

.vid-badge-primary {
    background: var(--vid-rose-500);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.vid-move {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
}
.vid-card:hover .vid-move { opacity: 1; }

.vid-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.vid-card-header { margin-bottom: 12px; }

.vid-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--vid-slate-800);
}

.vid-card-meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vid-slate-50);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--vid-slate-500);
    font-weight: 500;
}

.vid-card-stats { display: flex; gap: 12px; }
.vid-card-stats span { display: flex; align-items: center; }
.vid-card-stats i { margin-right: 4px; }
.vid-card-actions { display: flex; gap: 8px; }

.vid-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--vid-slate-50);
    color: var(--vid-slate-500);
}

.vid-action-btn:hover { text-decoration: none; }
.vid-btn-star:hover, .vid-btn-star.active { background: #fffbeb; color: #f59e0b; border-color: #fcd34d; }
.vid-btn-trash:hover { background: #fef2f2; color: #ef4444; border-color: #fecaca; }

/* Add New Card */
.vid-card-add {
    border: 2px dashed var(--vid-slate-200);
    border-radius: var(--vid-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    color: var(--vid-slate-400);
    text-decoration: none !important;
    transition: all 0.2s;
    background: var(--vid-slate-50);
    cursor: pointer;
}

.vid-card-add:hover {
    border-color: var(--vid-rose-500);
    color: var(--vid-rose-500);
    background: var(--vid-rose-50);
    transform: translateY(-4px);
}

.vid-add-icon {
    width: 60px;
    height: 60px;
    background: var(--vid-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    font-size: 24px;
    box-shadow: var(--vid-shadow);
    color: var(--vid-rose-500);
    transition: transform 0.2s;
}

.vid-card-add:hover .vid-add-icon { transform: scale(1.1); }

/* --- FORM & UPLOADER STYLES --- */
.vid-form-container {
    background: var(--vid-white);
    padding: 30px;
    border-radius: var(--vid-radius);
    box-shadow: var(--vid-shadow);
    border: 1px solid var(--vid-slate-100);
    margin: 0 auto;
}

.vid-uploader-section { margin-bottom: 30px; }

.vid-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 3px dashed var(--vid-slate-200);
    border-radius: var(--vid-radius);
    padding: 40px;
    text-decoration: none !important;
    transition: all 0.2s;
    background: var(--vid-slate-50);
    cursor: pointer;
}

.vid-upload-box:hover {
    border-color: var(--vid-rose-500);
    background: var(--vid-rose-50);
}

.vid-upload-icon-circle {
    width: 64px;
    height: 64px;
    background: var(--vid-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--vid-rose-500);
    box-shadow: var(--vid-shadow);
    margin-bottom: 16px;
}

.vid-upload-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--vid-slate-800);
    margin-bottom: 8px;
}

.vid-upload-note {
    font-size: 13px;
    color: var(--vid-slate-500);
    text-align: center;
    max-width: 400px;
}

.vid-input-group { margin-bottom: 24px; }
.vid-input-group label { display: block; font-weight: 600; color: var(--vid-slate-800); margin-bottom: 8px; font-size: 14px; }

.vid-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--vid-slate-200);
    border-radius: 10px;
    font-size: 15px;
    color: var(--vid-slate-900);
    transition: all 0.2s;
    background: var(--vid-slate-50);
}

.vid-form-control:focus {
    outline: none;
    border-color: var(--vid-rose-500);
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
    background: var(--vid-white);
}

.vid-help-text { font-size: 13px; color: var(--vid-slate-400); margin-top: 6px; }

/* Custom Checkbox */
.vid-checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-left: 32px;
}

.vid-checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.vid-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: var(--vid-slate-200);
    border-radius: 6px;
    transition: all 0.2s;
}

.vid-checkbox-container:hover .vid-checkmark { background-color: var(--vid-slate-300); }
.vid-checkbox-container input:checked ~ .vid-checkmark { background-color: var(--vid-rose-500); }
.vid-checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.vid-checkbox-container input:checked ~ .vid-checkmark:after { display: block; }
.vid-checkbox-label { font-size: 15px; font-weight: 500; color: var(--vid-slate-800); }

.vid-form-actions { margin-top: 30px; text-align: right; }

/* --- UPLOADED FILE & THUMBNAIL PREVIEW STYLES (Fixed) --- */

.vid-res-one {
    display: flex;
    flex-direction: column; /* Stack video on top */
    align-items: flex-start;
    padding: 0;
    background: var(--vid-white);
    border: 1px solid var(--vid-slate-200);
    border-radius: 12px;
    margin-top: 20px;
    box-shadow: var(--vid-shadow);
    overflow: hidden;
}

/* Big Video Player Container */
.vid-res-preview { 
    width: 100% !important;
    height: auto !important;
    min-height: 200px;
    max-height: 600px; /* Increased to allow vertical video */
    background: var(--vid-slate-100); /* Removed black, use theme bg */
    border-bottom: 1px solid var(--vid-slate-200);
    margin: 0; 
    flex-shrink: 0; 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Add padding to float the video */
}

/* The actual video element */
.vid-res-preview video, 
.vid-res-preview img { 
    width: auto !important; /* Allow natural width */
    height: auto !important; 
    max-width: 100% !important;
    max-height: 540px !important; /* Fit within the 600px container - padding */
    object-fit: contain !important; 
    border: none;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* File Info Bar below video */
.vid-res-info { 
    width: 100%;
    padding: 15px 20px;
    background: var(--vid-slate-50);
    border-top: 1px solid var(--vid-slate-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vid-res-file-name { 
    font-size: 15px; 
    font-weight: 600; 
    color: var(--vid-slate-800); 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 70%;
}

.vid-upload-delete { 
    color: #ef4444; 
    font-size: 13px; 
    font-weight: 600; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    padding: 8px 14px; 
    background: #fef2f2; 
    border-radius: 8px; 
    transition: 0.2s; 
}
.vid-upload-delete:hover { background: #fee2e2; text-decoration: none; color: #dc2626; }

/* Thumbs Selection */
.vid-thumbs-container { margin-top: 24px; }
.vid-thumbs-title { display: block; margin-bottom: 12px; color: var(--vid-slate-800); font-weight: 600; font-size: 15px; }
.vid-thumbs-grid { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; }

/* Scrollbar for thumbs */
.vid-thumbs-grid::-webkit-scrollbar { height: 6px; }
.vid-thumbs-grid::-webkit-scrollbar-track { background: var(--vid-slate-100); border-radius: 3px; }
.vid-thumbs-grid::-webkit-scrollbar-thumb { background: var(--vid-slate-300); border-radius: 3px; }

.vid-thumb-item {
    position: relative;
    width: 140px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid transparent;
    cursor: pointer;
    transition: 0.2s;
    background: #000;
}

.vid-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.vid-thumb-item:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.vid-thumb-item.active { border-color: var(--vid-rose-500); opacity: 1; }

.vid-thumb-check { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background: var(--vid-rose-500); 
    color: white; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    font-size: 14px; 
    display: none; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.vid-thumb-item.active .vid-thumb-check { display: flex; }

/* Empty State */
.vid-empty-state { text-align: center; padding: 60px 20px; grid-column: 1 / -1; }
.vid-empty-icon { font-size: 48px; color: var(--vid-slate-200); margin-bottom: 16px; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .vid-header-actions { display: none !important; }
    .vid-mobile-action { display: block !important; }
    .vid-header { margin-bottom: 20px; }
    .vid-grid { grid-template-columns: 1fr; }
    .vid-move { opacity: 1; width: 40px; height: 40px; background: rgba(0,0,0,0.6); }
    .vid-card { width: 100%; margin-bottom: 15px; }
    .vid-stats-grid { grid-template-columns: 1fr 1fr;
        gap: 0.5rem; }
    .vid-stat-card {     padding: 0.75rem;
    gap: 0.75rem; }
     .vid-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
     .vid-stat-label {
        font-size: 0.65rem;
    }
    .vid-stat-value {
    font-size: 1.2rem;
}
    /* Make preview stack on mobile */
    .vid-res-one { flex-direction: column; align-items: flex-start; }
    .vid-res-preview { width: 100% !important; height: 180px !important; margin-right: 0; margin-bottom: 12px; }
}

/* New Circular Image Style */
.vid-listing-circle-wrap {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--vid-slate-200);
    box-shadow: var(--vid-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.vid-listing-circle-wrap:hover {
    transform: scale(1.1) rotate(5deg);
    border-color: var(--vid-rose-500);
}

.vid-listing-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================
   3. MODERN UPPY & UPLOAD OVERLAY STYLES
   ========================================= */

/* FULLSCREEN UPLOAD OVERLAY */
.vid-upload-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 999999;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.vid-overlay-box {
    position: relative;
    text-align: center;
    max-width: 400px;
    width: 90%;
    padding: 40px 30px 30px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    border: 1px solid var(--vid-slate-100);
}

/* Close Button "X" */
.vid-overlay-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: var(--vid-slate-400);
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    transition: all 0.2s;
}

.vid-overlay-close:hover {
    background: var(--vid-slate-100);
    color: var(--vid-slate-800);
}

.vid-overlay-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--vid-slate-900);
    margin: 10px 0 5px 0;
    transition: color 0.3s ease;
}

.vid-overlay-text {
    font-size: 15px;
    color: var(--vid-slate-500);
    margin-bottom: 25px;
    min-height: 22px; /* Prevent jump when text changes */
    transition: opacity 0.3s ease;
}

.vid-overlay-progress-bg {
    width: 100%;
    height: 8px;
    background: var(--vid-slate-100);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 15px;
}

.vid-overlay-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #e11d48);
    border-radius: 100px;
    transition: width 0.3s ease;
}

.vid-overlay-warning {
    font-size: 13px;
    color: #e11d48;
    font-weight: 600;
    background: #fff1f2;
    padding: 10px;
    border-radius: 8px;
    margin-top: 15px;
}

/* Spinner Animation */
.vid-overlay-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--vid-slate-100);
    border-top: 4px solid var(--vid-rose-500);
    border-radius: 50%;
    animation: vid-spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes vid-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CUSTOM UPPY DASHBOARD OVERRIDES */
/* These use !important to force override the library's default styles */

.uppy-Dashboard-inner {
    background-color: #fff !important;
    border: 1px solid var(--vid-slate-200) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.uppy-Dashboard-AddFiles {
    border: 2px dashed var(--vid-slate-200) !important;
    border-radius: 12px !important;
    background: var(--vid-slate-50) !important;
    transition: all 0.2s;
}

.uppy-Dashboard-AddFiles:hover {
    border-color: var(--vid-rose-500) !important;
    background: var(--vid-rose-50) !important;
}

.uppy-Dashboard-browse {
    color: var(--vid-rose-500) !important;
    font-weight: 700 !important;
}

/* Hide Generic Header */
.uppy-DashboardContent-bar {
    display: none !important;
}

.uppy-StatusBar {
    background-color: #fff !important;
    border-top: 1px solid var(--vid-slate-100) !important;
    z-index: 100 !important;
}

.uppy-StatusBar-progress {
    background-color: var(--vid-rose-500) !important;
}

/* Customize Buttons */
.uppy-c-btn-primary {
    background-color: var(--vid-rose-500) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.uppy-c-btn-primary:hover {
    background-color: var(--vid-rose-600) !important;
}

/* Clean up status icons */
.uppy-StatusBar-statusIndicator {
    color: var(--vid-rose-500) !important;
}

/* Hide "Powered By" to look more professional */
.uppy-Dashboard-poweredBy {
    display: none !important;
}

/* ==========================================================================
   FINAL FIXED MEDIA TAB - GRID & FILTERS
   Target: #tab-media in profile
   ========================================================================== */

/* 1. CONTAINER RESET */
#tab-media #vid-item-videos {
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

/* 2. RESTORE & STYLE FILTERS (The Controls) */
#tab-media #vid-item-videos .vid-tabs {
    display: flex !important; /* Restore visibility */
    justify-content: center;  /* Center the buttons */
    gap: 10px;
    padding: 5px 0 20px 0 !important; /* Space below filters */
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Filter Button Styling */
#tab-media #vid-item-videos .vid-tabs a {
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    color: #555 !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: "CircularXXWeb-Medium", sans-serif;
    transition: all 0.2s ease;
    margin: 0 !important;
}

/* Active/Hover Filter State */
#tab-media #vid-item-videos .vid-tabs a:hover,
#tab-media #vid-item-videos .vid-tabs a.active {
    background: #f36 !important; /* Brand Pink */
    color: #fff !important;
    border-color: #f36 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(255, 51, 102, 0.3);
}

/* 3. THE GRID CONTAINER */
#tab-media #vid-item-videos .vid-inside {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 18px !important;
    padding: 0 5px 12px 5px !important;
    margin: 0 !important;
}

/* 4. MEDIA CARD SHELL */
#tab-media .vid-video {
    /* Reset List Styles */
    flex: unset !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    
    /* Card Look */
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    display: flex;
    flex-flow: column nowrap !important;
    align-content: flex-start !important;
}

#tab-media .vid-video:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

/* EMPTY VIDEO CARD - override flex-start alignment */
#tab-media .vid-video.vid-empty-card {
    display: flex !important;
    flex-flow: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-content: center !important;
}
#tab-media .vid-video.vid-empty-card .vid-add-card-inner {
    margin: auto;
}

/* 5. MEDIA ASSET WRAPPER (1:1 SQUARE) */
#tab-media .vid-video .vid-assets {
    flex: 0 0 auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    position: relative !important;
    overflow: hidden !important;
    background: #0d0808;
}

/* 6. IMAGE & VIDEO ELEMENTS (Fixing Visibility) */
#tab-media .vid-video .vid-assets img,
#tab-media .vid-video .vid-assets video,
#tab-media .vid-video .vid-assets picture {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Fill the square, crop excess */
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.5s ease;
}

/* Hover Zoom Effect */
#tab-media .vid-video:hover .vid-assets img,
#tab-media .vid-video:hover .vid-assets picture img {
    transform: scale(1.05);
}

/* Video Hover Preview Layer */
#tab-media .vid-video .vid-video-preview {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#tab-media .vid-video:hover .vid-video-preview {
    opacity: 1; /* Show video preview on hover */
}

/* 7. FOOTER: LEFT (Title) */
#tab-media .vid-video .vid-main {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0;
    padding: 14px 14px 6px 14px !important;
    order: 2;
}

#tab-media .vid-video .vid-title {
    font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif);
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    color: #111 !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#tab-media .vid-video .vid-length {
    display: none !important;
}

/* 8. FOOTER: RIGHT (Stats) */
#tab-media .vid-video .vid-details {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 0 14px 14px 14px !important;
    order: 3;
    margin-left: 0 !important;
}

/* View Counter (Eye Icon) */
#tab-media .vid-video .vid-views {
    font-size: 0 !important; /* Hide "views" text */
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
#tab-media .vid-video .vid-views .vid-counter {
    font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif);
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111 !important;
}
#tab-media .vid-video .vid-views::before {
    content: '\f06e'; /* FontAwesome Eye */
    font-family: 'FontAwesome';
    font-size: 13px;
    color: #111;
    opacity: 0.7;
    margin-right: 0;
}

/* Like Button (Thumb Icon) */
#tab-media .vid-video .vid-likes {
    font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif);
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    color: #111 !important;
}

#tab-media .vid-video .vid-likes i.fa {
    font-size: 13px;
    margin-right: 0;
    color: #111 !important;
    transition: all 0.2s;
}

#tab-media .vid-video .vid-likes:hover i.fa,
#tab-media .vid-video .vid-likes.liked i.fa {
    color: #111 !important;
    transform: none;
}

#tab-media .vid-video .vid-likes.liked em {
    color: #111;
    font-weight: 600;
}

#tab-media .vid-video .vid-likes em {
    font-style: normal;
    color: #111;
}

/* 9. MOBILE ADJUSTMENTS */
@media screen and (max-width: 600px) {

	#tab-media #vid-item-videos .vid-tabs {
    padding: 5% 0 2.5% 0 !important;
}
    #tab-media #vid-item-videos {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #tab-media #vid-item-videos .vid-inside {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 8px 12px 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    #tab-media .vid-video {
        min-width: 0 !important;
        max-width: 100% !important;
        border-radius: 16px !important;
    }
    
    #tab-media .vid-video .vid-assets {
        aspect-ratio: 4 / 5 !important;
    }

    #tab-media .vid-video .vid-main {
        padding: 12px 12px 4px 12px !important;
    }

    #tab-media .vid-video .vid-title {
        font-size: 15px !important;
    }

    #tab-media .vid-video .vid-details {
        gap: 12px !important;
        padding: 0 12px 12px 12px !important;
    }

    #tab-media .vid-video .vid-views .vid-counter,
    #tab-media .vid-video .vid-likes,
    #tab-media .vid-video .vid-likes em {
        font-size: 12px !important;
    }
}

/* ==========================================================================
   FIX: HIDE NATIVE VIDEO CONTROLS IN GRID
   ========================================================================== */

/* 1. Hide default browser video controls (Play bar, volume, etc.) */
#tab-media .vid-video video::-webkit-media-controls {
    display: none !important;
    opacity: 0 !important;
}

#tab-media .vid-video video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* 2. Prevent clicking on the video player itself */
/* This ensures clicks pass through to the Fancybox link instead of playing inline */
#tab-media .vid-video video {
    pointer-events: none !important;
    /* Ensure no background interrupts the aspect ratio */
    background: transparent !important; 
}

/* 3. Ensure the Play icon overlay (if you have one) or the Link is clickable */
#tab-media .vid-video .vid-assets a {
    z-index: 5 !important;
    cursor: pointer !important;
}

/* 4. Refine the Card Shadow/Border to look cleaner like the image */
#tab-media .vid-video {
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* 5. Fix Text/Footer spacing to match the clean look */
#tab-media .vid-video .vid-main {
    padding-bottom: 6px !important;
}
#tab-media .vid-video .vid-details {
    padding-bottom: 14px !important;
}

#tab-media .vid-video video::-webkit-media-controls-panel {
    display: none !important;
}

#tab-media .vid-video video::-webkit-media-controls-play-button {
    display: none !important;
}

#tab-media .vid-video video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}

#tab-media .vid-video video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

/* ==========================================================================
   FIX: HIDE NATIVE VIDEO CONTROLS IN GRID
   ========================================================================== */

@media screen and (max-width: 768px) {
    #tab-media #main {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #tab-media .videoarea {
        padding: 0 0px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #tab-media #vid-item-videos {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    #tab-media #vid-item-videos .vid-inside {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
		padding: 0 8px 12px 8px !important;
    }
    
    #tab-media .vid-video {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   FIX: CENTER CONTENT FOR 'ADD VIDEO' CARD
   ========================================================= */

/* 1. Target the specific card wrapper */
#tab-media .vid-video.vid-add-card,
#tab-media .vid-add-card {
    /* Override the general grid alignment that pushes content to the top */
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Ensure it behaves like a flex column (Icon on top of Text) */
    display: flex !important;
    flex-direction: column !important;
    
    /* Reset padding so it doesn't look off-center */
    padding: 0 !important;
    aspect-ratio: 4 / 5 !important;
    border-radius: 16px !important;
}

/* 2. Target the inner content div you mentioned */
#tab-media .vid-add-card .vid-add-card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

@media screen and (max-width: 768px) {
    #tab-media .videoarea {
        height: 100% !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #tab-media #vid-item-videos {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    #tab-media #vid-item-videos .vid-inside {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: 100% !important;
        padding: 12px 12px 72px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
        align-content: stretch !important;
        overflow: hidden !important;
    }

    #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside {
        grid-auto-flow: column !important;
        grid-template-columns: none !important;
        grid-auto-columns: calc((100% - 8px) / 2) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside::-webkit-scrollbar {
        display: none !important;
    }

    #tab-media .vid-video {
        border-radius: 20px !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
        transform: none !important;
        align-self: stretch !important;
        height: 100% !important;
        display: grid !important;
        grid-template-rows: minmax(0, 1fr) 40px !important;
        scroll-snap-align: start !important;
    }

    #tab-media .vid-video .vid-assets {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: auto !important;
        background: #0d0808 !important;
    }

    #tab-media .vid-video .vid-main,
    #tab-media .vid-video .vid-title,
    #tab-media .vid-video .vid-length {
        display: none !important;
    }

    #tab-media .vid-video .vid-details {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        justify-content: normal !important;
        gap: 10px !important;
        padding: 0 12px 4px !important;
        background: #fff !important;
    }

    #tab-media .vid-video .vid-views,
    #tab-media .vid-video .vid-likes {
        min-width: 0 !important;
    }

    #tab-media .vid-video .vid-views {
        gap: 5px !important;
        min-height: 0 !important;
        align-items: center !important;
        justify-self: start !important;
    }

    #tab-media .vid-video .vid-views .vid-counter,
    #tab-media .vid-video .vid-likes,
    #tab-media .vid-video .vid-likes em {
        font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #111 !important;
    }

    #tab-media .vid-video .vid-views::before,
    #tab-media .vid-video .vid-likes i.fa {
        font-size: 14px !important;
        color: #111 !important;
        opacity: 0.78 !important;
    }

    #tab-media .vid-video .vid-likes {
        margin-left: 0 !important;
        min-width: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        gap: 8px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    #tab-media .vid-video .vid-likes i.fa {
        display: none !important;
    }

    #tab-media .vid-video .vid-likes::before {
        content: "" !important;
        width: 20px !important;
        height: 20px !important;
        flex: 0 0 20px !important;
        display: inline-block !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 20px 20px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0808' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 1.97-1.69l1.38-9A2 2 0 0 0 19.65 9H14z'/%3E%3Cpath d='M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E") !important;
    }

    #tab-media .vid-video .vid-likes em {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    #tab-media .vid-video .vid-likes.liked::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230D0808'%3E%3Cpath d='M1 21h4V9H1v12zm21-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 6.59 7.59C6.22 7.95 6 8.45 6 9v10c0 1.1.9 2 2 2h8c.82 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E") !important;
    }

    #tab-media .vid-video.vid-add-card,
    #tab-media .vid-add-card {
        border-radius: 20px !important;
        aspect-ratio: auto !important;
        height: 100% !important;
    }
}

/* PROMO CARD */
.vid-promo-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.vid-icon-promo {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.vid-promo-label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.vid-promo-value {
    color: #fff !important;
    font-size: 15px !important;
    margin-bottom: 5px;
    display: block;
}

.vid-promo-progress {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 5px;
    overflow: hidden;
    min-width: 140px;
}

.vid-promo-fill {
    height: 100%;
    background: #fff;
    border-radius: 10px;
    transition: width 0.5s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.vid-promo-text {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 4px;
    display: block;
    text-align: right;
    color: #fff;
    font-weight: 600;
}

/* =========================================
   FANCYBOX LIKE OVERLAY - TikTok Style
   ========================================= */

/* Main overlay container - covers entire Fancybox */
.vid-fancybox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999999;
  pointer-events: none;
}

/* Right sidebar - vertical action buttons */
.vid-fb-sidebar {
  position: absolute;
  right: 20px;
  bottom: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  pointer-events: auto;
}

/* Action button container (heart, eye) */
.vid-fb-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.vid-fb-action:hover {
  transform: scale(1.1);
  color: #fff;
  text-decoration: none;
}

/* Icon styling */
.vid-fb-action i {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transition: all 0.2s ease;
}

/* Count below icon */
.vid-fb-action span {
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Like button specific */
.vid-fancybox-like.liked i {
  color: #ff4757;
  animation: vidHeartPulse 0.3s ease;
}

/* Views action - non-clickable */
.vid-fb-views-action {
  cursor: default;
}

.vid-fb-views-action:hover {
  transform: none;
}

@keyframes vidHeartPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Save button specific */
.vid-fancybox-save.saved i {
  color: #f59e0b;
  animation: vidBookmarkPulse 0.3s ease;
}

@keyframes vidBookmarkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}

/* Grid card save button */
.vid-grid-save {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
  pointer-events: auto;
}

.vid-grid-save:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: scale(1.05);
  color: #fff;
  text-decoration: none;
}

.vid-grid-save i {
  font-size: 15px;
}

.vid-grid-save.saved i {
  color: #f59e0b;
}

.vid-grid-save .vid-save-label {
  font-weight: 600;
  font-size: 12px;
}

/* Bottom user info section */
.vid-fb-userinfo {
  position: absolute;
  left: 20px;
  bottom: 140px;
  pointer-events: auto;
}

.vid-fb-user-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s ease;
}

.vid-fb-user-link:hover {
  opacity: 0.9;
  text-decoration: none;
  color: #fff;
}

/* User avatar - circular */
.vid-fb-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Username */
.vid-fb-username {
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .vid-fb-sidebar {
    right: 12px;
    bottom: 160px;
    gap: 16px;
  }

  .vid-fb-action i {
    font-size: 24px;
  }

  .vid-fb-action span {
    font-size: 12px;
  }

  .vid-fb-userinfo {
    left: 12px;
    bottom: 90px;
  }

  .vid-fb-avatar {
    width: 36px;
    height: 36px;
  }

  .vid-fb-username {
    font-size: 14px;
    max-width: 150px;
  }
}

/* =========================================
   MOBILE FULLSCREEN - TikTok/Reels Style
   ========================================= */

@media (max-width: 768px) {
  /* Hide custom close button on mobile (use per-slide button) */
  .vid-fb-close {
    display: none !important;
  }

  /* Fullscreen container - no border radius, covers entire viewport */
  /* Using 100dvh for dynamic viewport height (handles mobile browser UI) */
  .gallery-videogal.fancybox__container,
  .fancybox__container.has-html5video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;  /* Fallback for older browsers */
    height: 100dvh !important; /* Primary - handles mobile browser UI */
    max-width: 100vw !important;
    max-height: 100vh !important;  /* Fallback */
    max-height: 100dvh !important; /* Primary */
    border-radius: 0 !important;
    overflow: hidden !important;
    will-change: transform !important;
  }

  /* Viewport takes full height, uses flexbox for layout */
  /* Removed flex-direction: column to allow horizontal (side-to-side) swiping */
  .gallery-videogal .fancybox__viewport,
  .fancybox__container.has-html5video .fancybox__viewport {
    display: flex !important;
    width: 100% !important;
    height: calc(100% - 70px) !important; /* Leave space for thumbnails only */
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* Carousel fills available space */
  .gallery-videogal .fancybox__carousel,
  .fancybox__container.has-html5video .fancybox__carousel {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Track must be full width for proper transform calculations */
  .gallery-videogal .fancybox__track,
  .fancybox__container.has-html5video .fancybox__track {
    width: 100% !important;
  }

  /* Slide takes full available space */
  .gallery-videogal .fancybox__slide,
  .fancybox__container.has-html5video .fancybox__slide {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
  }

  /* Remove caption space reservation */
  .gallery-videogal .fancybox__slide.has-caption,
  .fancybox__container.has-html5video .fancybox__slide.has-caption {
    padding-bottom: 0 !important;
  }

  /* Content wrapper - flexible height */
  .gallery-videogal .fancybox__content,
  .fancybox__container.has-html5video .fancybox__content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Video element - cover entire area */
  .gallery-videogal .fancybox__content video,
  .fancybox__container.has-html5video .fancybox__content video,
  .gallery-videogal .f-html video,
  .fancybox__container.has-html5video .f-html video {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* HTML5 video wrapper */
  .gallery-videogal .f-html,
  .fancybox__container.has-html5video .f-html {
    width: 100% !important;
    height: 100% !important;
  }

  /* Thumbnail navigation - fixed at bottom, moved higher */
  .gallery-videogal .fancybox__thumbs,
  .fancybox__container.has-html5video .fancybox__thumbs {
    position: fixed !important;
    bottom: 20px !important; /* Moved up from edge */
    left: 0 !important;
    right: 0 !important;
    height: 70px !important;
    max-height: 70px !important;
    z-index: 99999999 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    padding: 5px 0 !important;
    flex-shrink: 0 !important;
  }

  /* Thumbnail track */
  .gallery-videogal .fancybox__thumbs .carousel__track,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__track {
    height: 60px !important;
  }

  /* Individual thumbnails */
  .gallery-videogal .fancybox__thumbs .carousel__slide,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__slide {
    width: 60px !important;
    height: 60px !important;
    padding: 0 3px !important;
  }

  .gallery-videogal .fancybox__thumbs .carousel__slide img,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__slide img {
    width: 54px !important;
    height: 54px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
  }

  /* Hide Fancybox caption and infobar on mobile - we use overlay instead */
  .gallery-videogal .fancybox__caption,
  .fancybox__container.has-html5video .fancybox__caption,
  .gallery-videogal .f-caption,
  .fancybox__container.has-html5video .f-caption,
  .gallery-videogal .fancybox__infobar,
  .fancybox__container.has-html5video .fancybox__infobar,
  .f-caption {
    display: none !important;
  }

  /* Ensure backdrop covers entire screen */
  .gallery-videogal .fancybox__backdrop,
  .fancybox__container.has-html5video .fancybox__backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #000 !important;
    opacity: 1 !important;
  }

  /* TikTok Overlay adjustments for mobile fullscreen */
  .vid-fancybox-overlay {
    bottom: 70px !important; /* Above thumbnails */
  }

  /* Sidebar positioned higher - in the video area */
  .vid-fb-sidebar {
    right: 12px !important;
    bottom: 180px !important; /* Higher up in the video area */
    gap: 16px !important;
  }

  .vid-fb-action i {
    font-size: 28px !important;
  }

  .vid-fb-action span {
    font-size: 12px !important;
  }

  /* User info positioned at bottom left of video */
  .vid-fb-userinfo {
    left: 12px !important;
    bottom: 90px !important;
  }

  .vid-fb-avatar {
    width: 40px !important;
    height: 40px !important;
  }

  .vid-fb-username {
    font-size: 14px !important;
    max-width: 180px !important;
  }

  /* Toolbar adjustments */
  .gallery-videogal .fancybox__toolbar,
  .fancybox__container.has-html5video .fancybox__toolbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999999 !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%) !important;
    padding: 10px !important;
  }

  /* Navigation arrows */
  .gallery-videogal .fancybox__nav,
  .fancybox__container.has-html5video .fancybox__nav {
    z-index: 99999999 !important;
  }

  .gallery-videogal .fancybox__nav .carousel__button,
  .fancybox__container.has-html5video .fancybox__nav .carousel__button {
    background: rgba(0, 0, 0, 0.4) !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* =========================================
   DESKTOP CINEMA CARD LAYOUT
   Only applies to screens > 768px
   Mobile styles above remain untouched
   ========================================= */

@media (min-width: 769px) {

  /* ===== 1. SEMI-TRANSPARENT BACKDROP (see page behind) ===== */
  .gallery-videogal .fancybox__backdrop,
  .fancybox__container.has-html5video .fancybox__backdrop {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 1 !important;
  }

  .gallery-videogal.fancybox__container,
  .fancybox__container.has-html5video {
    background: transparent !important;
  }

  /* ===== 2. THE CINEMA CARD CONTAINER ===== */
  /* This is the main card that holds everything */
  .gallery-videogal .fancybox__viewport,
  .fancybox__container.has-html5video .fancybox__viewport {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

  .gallery-videogal .fancybox__carousel,
  .fancybox__container.has-html5video .fancybox__carousel {
    max-width: 1000px !important;
    width: calc(100% - 80px) !important;
    height: calc(100vh - 50px) !important;
    max-height: 920px !important;
    background: #000000 !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 25px auto !important;
  }

  /* ===== 3. VIDEO AREA (Top section of card) ===== */
  .gallery-videogal .fancybox__track,
  .fancybox__container.has-html5video .fancybox__track {
    flex: 1 !important;
    min-height: 0 !important;
  }

  .gallery-videogal .fancybox__slide,
  .fancybox__container.has-html5video .fancybox__slide {
    width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 80px 120px 80px !important;
  }

  .gallery-videogal .fancybox__content,
  .fancybox__container.has-html5video .fancybox__content {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .gallery-videogal .f-html,
  .fancybox__container.has-html5video .f-html {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* ===== 4. VIDEO ELEMENT - Natural sizing ===== */
  .gallery-videogal .fancybox__content video,
  .fancybox__container.has-html5video .fancybox__content video,
  .gallery-videogal .f-html video,
  .fancybox__container.has-html5video .f-html video {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: calc(85vh - 140px) !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  }

  /* ===== 5. THUMBNAIL STRIP (Inside card at bottom) ===== */
  .gallery-videogal .fancybox__thumbs,
  .fancybox__container.has-html5video .fancybox__thumbs {
    position: fixed !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 160px) !important;
    max-width: 880px !important;
    height: 90px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    border-radius: 16px !important;
    z-index: 99998 !important;
    padding: 8px 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Hide scrollbar but keep scroll functionality */
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  /* Hide scrollbar for Chrome/Safari */
  .gallery-videogal .fancybox__thumbs::-webkit-scrollbar,
  .fancybox__container.has-html5video .fancybox__thumbs::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  /* Desktop thumbnail viewport - disable Fancybox modern mode transforms */
  .gallery-videogal .fancybox__thumbs .f-thumbs__viewport,
  .fancybox__container.has-html5video .fancybox__thumbs .f-thumbs__viewport {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    height: 74px !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* Desktop thumbnail slides - FORCE proper sizing, disable clip-path */
  .gallery-videogal .fancybox__thumbs .f-thumbs__slide,
  .fancybox__container.has-html5video .fancybox__thumbs .f-thumbs__slide,
  .gallery-videogal .fancybox__thumbs .carousel__slide,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__slide {
    flex: 0 0 auto !important;
    width: 74px !important;
    height: 74px !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible !important;
  }

  /* Desktop thumbnail images */
  .gallery-videogal .fancybox__thumbs .f-thumbs__slide img,
  .fancybox__container.has-html5video .fancybox__thumbs .f-thumbs__slide img,
  .gallery-videogal .fancybox__thumbs .carousel__slide img,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__slide img {
    width: 74px !important;
    height: 74px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 3px solid transparent !important;
    transition: border-color 0.2s ease !important;
  }

  /* Desktop selected thumbnail */
  .gallery-videogal .fancybox__thumbs .f-thumbs__slide.is-selected img,
  .gallery-videogal .fancybox__thumbs .f-thumbs__slide.is-nav-selected img,
  .fancybox__container.has-html5video .fancybox__thumbs .f-thumbs__slide.is-selected img,
  .fancybox__container.has-html5video .fancybox__thumbs .f-thumbs__slide.is-nav-selected img,
  .gallery-videogal .fancybox__thumbs .carousel__slide.is-nav-selected img,
  .fancybox__container.has-html5video .fancybox__thumbs .carousel__slide.is-nav-selected img {
    border-color: #fff !important;
  }

  /* ===== 6. NAVIGATION ARROWS - Outside the card area ===== */
  .gallery-videogal .f-button.is-prev,
  .gallery-videogal .f-button.is-next,
  .gallery-videogal .is-arrow.is-prev,
  .gallery-videogal .is-arrow.is-next,
  .fancybox__container.has-html5video .f-button.is-prev,
  .fancybox__container.has-html5video .f-button.is-next,
  .fancybox__container.has-html5video .is-arrow.is-prev,
  .fancybox__container.has-html5video .is-arrow.is-next {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    z-index: 99999 !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
  }

  /* Previous button - left of card */
  .gallery-videogal .f-button.is-prev,
  .gallery-videogal .is-arrow.is-prev,
  .fancybox__container.has-html5video .f-button.is-prev,
  .fancybox__container.has-html5video .is-arrow.is-prev {
    left: max(calc(50% - 500px - 24px), 20px) !important;
    right: auto !important;
  }

  /* Next button - right of card */
  .gallery-videogal .f-button.is-next,
  .gallery-videogal .is-arrow.is-next,
  .fancybox__container.has-html5video .f-button.is-next,
  .fancybox__container.has-html5video .is-arrow.is-next {
    right: max(calc(50% - 500px - 24px), 20px) !important;
    left: auto !important;
  }

  .gallery-videogal .f-button.is-arrow:hover,
  .gallery-videogal .f-button.is-prev:hover,
  .gallery-videogal .f-button.is-next:hover,
  .fancybox__container.has-html5video .f-button.is-arrow:hover,
  .fancybox__container.has-html5video .f-button.is-prev:hover,
  .fancybox__container.has-html5video .f-button.is-next:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
  }

  /* ===== 7. CLOSE BUTTON - Fixed position top right of card ===== */
  .gallery-videogal .fancybox__toolbar,
  .fancybox__container.has-html5video .fancybox__toolbar {
    position: fixed !important;
    top: 46px !important;
    right: max(calc(50vw - 484px), 56px) !important;
    left: auto !important;
    z-index: 999999 !important;
  }

  .gallery-videogal .fancybox__toolbar .f-button,
  .fancybox__container.has-html5video .fancybox__toolbar .f-button {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    transition: all 0.2s ease !important;
  }

  .gallery-videogal .fancybox__toolbar .f-button:hover,
  .fancybox__container.has-html5video .fancybox__toolbar .f-button:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.08) !important;
  }

  /* Hide per-slide close button on desktop (we use container-level custom button) */
  .gallery-videogal .fancybox__slide .f-button.is-close-button,
  .fancybox__container.has-html5video .fancybox__slide .f-button.is-close-button {
    display: none !important;
  }

  /* Custom close button at container level */
  .vid-fb-close {
    position: fixed !important;
    top: 46px !important;
    right: max(calc(50vw - 484px), 56px) !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 999999999 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }

  .vid-fb-close:hover {
    background: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: scale(1.08) !important;
  }

  .vid-fb-close svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #fff !important;
  }

  /* ===== 8. LIKES/VIEWS SIDEBAR - Bottom right inside card ===== */
  /* Use max() to ensure it stays inside even on smaller screens */
  .vid-fb-sidebar {
    position: fixed !important;
    right: max(calc(50vw - 500px + 40px), 80px) !important;
    bottom: 140px !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }

  .vid-fb-action {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    width: auto !important;
    min-width: 64px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
  }

  .vid-fb-action:hover {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .vid-fb-action i {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .vid-fb-action span {
    font-size: 12px !important;
    font-weight: 500 !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    line-height: 1 !important;
  }

  /* ===== 9. USER INFO - Bottom left inside card ===== */
  .vid-fb-userinfo {
    position: fixed !important;
    left: max(calc(50vw - 500px + 40px), 80px) !important;
    bottom: 140px !important;
    right: auto !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 16px 8px 8px !important;
    border-radius: 30px !important;
  }

  .vid-fb-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    object-fit: cover !important;
  }

  .vid-fb-username {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
  }

  /* ===== 10. CAPTION - Hidden on desktop (cleaner look) ===== */
  .gallery-videogal .fancybox__caption,
  .fancybox__container.has-html5video .fancybox__caption,
  .gallery-videogal .f-caption,
  .fancybox__container.has-html5video .f-caption {
    display: none !important;
  }

  /* ===== 11. HIDE INFOBAR ===== */
  .gallery-videogal .fancybox__infobar,
  .fancybox__container.has-html5video .fancybox__infobar {
    display: none !important;
  }
}

/* =========================================
   MOBILE OVERRIDES - Higher Specificity
   These rules use ultra-specific selectors to
   override Fancybox defaults on mobile
   ========================================= */

@media (max-width: 768px) {
  /* CRITICAL: Force container to cover full viewport for single-video scenarios */
  .fancybox__container.gallery-videogal,
  .fancybox__container.has-html5video {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: none !important;
  }

  /* Backdrop - solid dark background for mobile performance (no blur) */
  .fancybox__container.gallery-videogal .fancybox__backdrop,
  .fancybox__container.has-html5video .fancybox__backdrop,
  .gallery-videogal > .fancybox__backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* CRITICAL: Force full-width on all carousel elements for single-video scenarios */
  .fancybox__container.gallery-videogal .fancybox__viewport,
  .fancybox__container.has-html5video .fancybox__viewport {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .fancybox__container.gallery-videogal .fancybox__carousel,
  .fancybox__container.has-html5video .fancybox__carousel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
  }

  .fancybox__container.gallery-videogal .fancybox__track,
  .fancybox__container.has-html5video .fancybox__track {
    width: 100% !important;
  }

  .fancybox__container.gallery-videogal .fancybox__slide,
  .fancybox__container.has-html5video .fancybox__slide {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Close button - rounded solid background for mobile performance (no blur) */
  button.f-button.is-close-button,
  .fancybox__slide button.f-button.is-close-button,
  .fancybox__container button.f-button.is-close-button {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Thumbnails - rounded pill container for mobile performance (no blur) */
  .fancybox__container.gallery-videogal .fancybox__thumbs,
  .fancybox__container.has-html5video .fancybox__thumbs,
  .gallery-videogal .fancybox__thumbs {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 20px !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.9) !important;
    border-radius: 20px !important;
    padding: 12px 16px !important;
    overflow-x: auto !important;
    height: 110px !important;
    will-change: transform !important;
  }

  /* FORCE DISABLE MODERN MODE - Override all Fancybox transforms */
  .fancybox__thumbs.is-modern .f-thumbs__viewport,
  .f-thumbs.is-modern .f-thumbs__viewport,
  .fancybox__container .fancybox__thumbs .f-thumbs__viewport,
  .fancybox__container .f-thumbs__viewport,
  [class*="f-thumbs"] .f-thumbs__viewport {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: 86px !important;
    width: auto !important;
    min-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Individual thumbnail slides - FORCE override transforms AND clip-path */
  .fancybox__thumbs.is-modern .f-thumbs__slide,
  .f-thumbs.is-modern .f-thumbs__slide,
  .fancybox__container .fancybox__thumbs .f-thumbs__slide,
  .fancybox__container .f-thumbs__slide,
  [class*="f-thumbs"] .f-thumbs__slide,
  .f-thumbs__slide[style] {
    flex: 0 0 70px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 86px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
    -webkit-transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    /* CRITICAL: Disable Fancybox's clip-path that causes thin strips */
    clip-path: none !important;
    -webkit-clip-path: none !important;
    --clip-path: none !important;
    --clip-shift: 0 !important;
    --progress: 0 !important;
    overflow: visible !important;
  }

  /* Thumbnail buttons */
  .fancybox__container .fancybox__thumbs .f-thumbs__slide button,
  .f-thumbs__slide button.f-html {
    width: 70px !important;
    height: 86px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
  }

  /* Thumbnail images - FORCE proper sizing */
  .fancybox__container .fancybox__thumbs .f-thumbs__slide img,
  .f-thumbs__slide img,
  .f-thumbs__slide .f-lazyload {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    border: 3px solid transparent !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  /* Selected thumbnail highlight - white border */
  .fancybox__container .fancybox__thumbs .f-thumbs__slide.is-selected img,
  .fancybox__container .fancybox__thumbs .f-thumbs__slide.is-nav-selected img,
  .f-thumbs__slide.is-selected img {
    border: 3px solid #fff !important;
  }
}

/* ==========================================================================
   INLINE ITEM VIDEO CARDS: EQUAL GRID HEIGHT + GLASS OVERLAY STATS
   ========================================================================== */

#tab-media #vid-item-videos .vid-video.vid-add-card,
#tab-media #vid-item-videos .vid-video.vid-empty-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 5 !important;
  background: #07090d !important;
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

#tab-media #vid-item-videos .vid-video.vid-add-card .vid-add-card-inner,
#tab-media #vid-item-videos .vid-video.vid-empty-card .vid-add-card-inner {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) {
  position: relative !important;
  display: block !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  background: #07090d !important;
  border: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12) !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 42% !important;
  background: linear-gradient(180deg, rgba(7, 9, 13, 0) 0%, rgba(7, 9, 13, 0.16) 34%, rgba(7, 9, 13, 0.68) 100%) !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  background: #07090d !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets > a {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets picture,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets .vid-res,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets .vid-res img,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets > a > img,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets .vid-video-preview,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-assets .vid-video-main {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: 0 !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-main,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-title,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-length {
  display: none !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-details {
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 6 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
}

/* ── Stats pills: solid white, elevated, tactile ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes {
  pointer-events: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Views pill override — minimal dark overlay, no border */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views {
  justify-content: flex-start !important;
  font-size: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: none !important;
  box-shadow: none !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes {
  margin-left: auto !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* Typography — likes pill (dark text on white) */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes em {
  font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #4B5563 !important;
  transition: color 0.2s ease !important;
}

/* Typography — views pill (white text on dark overlay) */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views .vid-counter {
  font-family: var(--escortify-item-font-family, "S\00F6hne", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: color 0.2s ease !important;
}

/* Icons — likes pill (gray on white) */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes i.fa,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes svg,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes svg * {
  font-size: 15px !important;
  color: #6B7280 !important;
  fill: #6B7280 !important;
  stroke: #6B7280 !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: all 0.2s ease !important;
}

/* Icons — views pill (white on dark overlay) */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views::before,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views svg,
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views svg * {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  fill: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
  margin: 0 !important;
}

/* Kill legacy thumbs-up pseudo-icon */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes::before {
  content: none !important;
  display: none !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes i.fa {
  display: inline-block !important;
}

/* ── Views hover: subtle brightness shift ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views:hover {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* ── Likes hover: lift + scale (tactile) ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10),
              0 2px 4px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
}

/* ── Active/press: ground it ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* ── Like: hover turns heart red ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes:hover {
  border-color: rgba(239, 68, 68, 0.12) !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes:hover i.fa {
  color: #EF4444 !important;
  fill: #EF4444 !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes:hover em {
  color: #EF4444 !important;
}

/* ── Liked state: subtle red tint ── */
#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes.liked {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.15) !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes.liked i.fa {
  color: #EF4444 !important;
  fill: #EF4444 !important;
}

#tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes.liked em {
  color: #EF4444 !important;
}

/* ── Mobile responsive ── */
@media screen and (max-width: 768px) {
  #tab-media #vid-item-videos .vid-video.vid-add-card,
  #tab-media #vid-item-videos .vid-video.vid-empty-card,
  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) {
    border-radius: 22px !important;
  }

  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-details {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    gap: 8px !important;
  }

  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views,
  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes {
    padding: 5px 12px !important;
  }

  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views .vid-counter,
  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes,
  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes em {
    font-size: 12px !important;
  }

  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-views::before,
  #tab-media #vid-item-videos .vid-video:not(.vid-add-card):not(.vid-empty-card) .vid-likes i.fa {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   MOBILE HERO VIDEO PEEK: KEEP ADD/EMPTY TILE SAME SHAPE AS MEDIA CARDS
   ========================================================================== */
@media screen and (max-width: 768px) {
  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-add-card,
  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-empty-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    grid-template-rows: none !important;
    overflow: hidden !important;
    scroll-snap-align: start !important;
  }

  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-add-card .vid-add-card-inner,
  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-empty-card .vid-add-card-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    gap: 12px !important;
    text-align: center !important;
  }

  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-add-card .vid-add-card-icon,
  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-empty-card .vid-add-card-icon {
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-add-card .vid-add-card-text,
  #tab-media #vid-item-videos.vid-item-videos--paged .vid-inside > .vid-video.vid-empty-card .vid-add-card-text {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
}