/* Thumbnail */
.video-thumbnail {
    position: relative;
    cursor: pointer;
}

/* Play button */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}

.play-button:hover {
    background: rgba(255, 255, 255, 1);
}

.play-button img {
    width: 50%;
    height: auto;
}

/* Video grid */
.video-main {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.video-repeat {
    width: calc(33.33% - 30px);
    margin: 10px 15px;
    padding: 10px 10px 0 10px;
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);
    border-radius: 10px;
}

/* =========================
   MODAL FIX (IMPORTANT PART)
   ========================= */

/* Full screen dark overlay */
#videoModal {
    background: rgba(0, 0, 0, 0.9);
}

/* Modal dialog - keep Bootstrap xl working */
#videoModal .modal-dialog {
    max-width: 700px; /* modal-xl equivalent */
    margin: 1.75rem auto;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

/* Modal content */
#videoModal .modal-content {
    width: 100%;
    border-radius: 10px;
    background: #fff;
    padding: 20px;
}

/* Header */
#videoModal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0;
}

/* Title */
#videoModal .modal-title {
    font-size: 18px;
    margin: 0;
}

/* Close button */
#videoModal .close {
    font-size: 28px;
    color: #333;
    cursor: pointer;
    background: none;
    border: none;
}

/* Body */
#videoModal .modal-body {
    padding: 0;
}

/* Responsive iframe (IMPORTANT) */
#videoFrame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* Card text styling */
.video-repeat .card-body {
    padding: 0 10px;
}

.video-repeat.card-video-row .card-title {
    font-size: 16px;
    line-height: 1.5rem;
    font-family: 'open_sansbold';
    margin-top: 8px !important;
}

/* Layout fix */
.width.cf #content {
    width: 100% !important;
}