@charset "UTF-8";
/* CSS Document */

/* Video System Layout Container */
.video-system-container {
    max-width: 800px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Hide Radio State Inputs completely */
input[type="radio"][name="subtitle-lang"] {
    display: none;
}

/* Flag Indicator Row Layout */
.flag-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

/* Styled Rounded Buttons */
.flag-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 50px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    color: #555;
    transition: all 0.2s ease-in-out;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.flag-emoji {
    font-size: 1.2rem;
}

/* Hover effects for unselected buttons */
.flag-btn:hover {
    border-color: #999;
    color: #222;
    transform: translateY(-1px);
}

/* Active Button Accent Styles linked via Checked State */
#lang-en:checked ~ .flag-selector label[for="lang-en"],
#lang-de:checked ~ .flag-selector label[for="lang-de"],
#lang-fr:checked ~ .flag-selector label[for="lang-fr"],
#lang-es:checked ~ .flag-selector label[for="lang-es"],
#lang-zh:checked ~ .flag-selector label[for="lang-zh"] {
    background-color: #222;
    border-color: #222;
    color: #fff;
    transform: translateY(0) scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Responsive 16:9 Video Wrapper */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Pure CSS Subtitle Overlay Rules */
.custom-subtitles {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    pointer-events: none;
    text-align: center;
    z-index: 10;
}

.sub-text {
    display: none;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
}

/* Toggle visibility based on selected radio button */
#lang-en:checked ~ .video-wrapper .custom-subtitles .sub-text.sub-en,
#lang-de:checked ~ .video-wrapper .custom-subtitles .sub-text.sub-de,
#lang-fr:checked ~ .video-wrapper .custom-subtitles .sub-text.sub-fr,
#lang-es:checked ~ .video-wrapper .custom-subtitles .sub-text.sub-es,
#lang-zh:checked ~ .video-wrapper .custom-subtitles .sub-text.sub-zh {
    display: inline-block;
}