/* GoalLineLive Enhanced Simplified Styles - v5 Fullscreen Watermark Fix */

.goallinelive-container {
    border: 1px solid #ddd;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
    --primary-color: #ff0000; /* Default Red */
    --secondary-color: #ffcc00; /* Default Yellow */
}

.goallinelive-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goallinelive-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.goallinelive-header-icons span {
    margin-left: 10px;
    cursor: pointer;
}

.goallinelive-tabs {
    display: flex;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    white-space: nowrap;
}

.goallinelive-tab-link {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 15px;
    transition: background-color 0.3s;
    font-size: 1em;
    color: #333;
    border-bottom: 3px solid transparent;
}

.goallinelive-tab-link:hover {
    background-color: #ddd;
}

.goallinelive-tab-link.active {
    background-color: #fff;
    border-bottom: 3px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
}

.goallinelive-content {
    padding: 15px;
    border-top: none;
    background-color: #fff;
}

.goallinelive-tab-content {
    display: none;
}

.goallinelive-tab-content.active {
    display: block;
}

/* Player Container & Wrapper */
.goallinelive-player-container {
    position: relative;
    width: 100%;
    background-color: #000;
    /* Aspect ratio using padding-bottom */
    height: 0;
    padding-bottom: 56.25%; /* Default 16:9 */
    overflow: hidden; /* Hide anything outside */
}

/* Placeholder for lazy loading */
.goallinelive-player-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    background-color: #111;
}
.gll-loading-indicator {
    font-size: 1.1em;
}

/* Loaded player state (replaces placeholder) */
.goallinelive-player-loaded {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.goallinelive-player-container iframe,
.goallinelive-player-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Telegram Overlay Styles */
.goallinelive-telegram-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 15px;
    max-width: 300px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    text-align: center;
    direction: rtl;
    display: none; /* Hidden by default */
}
.goallinelive-telegram-overlay.visible {
    display: block;
}
.goallinelive-telegram-overlay.initially-hidden {
    display: none;
}
.goallinelive-telegram-overlay h3 { margin-top: 0; color: #333; font-size: 16px; }
.goallinelive-telegram-overlay p { margin: 8px 0; font-size: 14px; color: #555; }
.goallinelive-telegram-overlay .button {
    background-color: #0088cc;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin-top: 10px;
}
.goallinelive-telegram-close {
    position: absolute;
    top: 5px;
    left: 5px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 101; /* Above overlay content */
}

/* Ad Overlay Styles */
.goallinelive-ad-overlay {
    position: absolute;
    z-index: 90;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.goallinelive-ad-header { top: 20px; left: 50%; transform: translateX(-50%); max-width: 80%; }
.goallinelive-ad-footer { bottom: 20px; left: 50%; transform: translateX(-50%); max-width: 80%; }
.goallinelive-ad-close {
    position: absolute;
    top: 2px;
    right: 2px;
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    z-index: 91; /* Above ad content */
}

/* Watermark Styles */
.goallinelive-watermark {
    position: absolute;
    z-index: 50; /* Above video, below controls/overlays */
    pointer-events: none;
    opacity: 0.8;
    max-width: 15%;
    max-height: 15%;
    transition: opacity 0.3s ease;
}
.goallinelive-logo-watermark img { max-width: 100%; height: auto; display: block; }
.goallinelive-text-watermark {
    color: white;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    white-space: nowrap;
}

/* Watermark Positions */
.watermark-position-top-right { top: 10px; right: 10px; }
.watermark-position-top-left { top: 10px; left: 10px; }
.watermark-position-bottom-right { bottom: 10px; right: 10px; }
.watermark-position-bottom-left { bottom: 10px; left: 10px; }
.watermark-position-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.watermark-position-top-center { top: 10px; left: 50%; transform: translateX(-50%); }
.watermark-position-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }

/* --- Fullscreen Watermark Enhancements --- */

/* Case 1: The CONTAINER goes fullscreen */
.goallinelive-player-container:fullscreen,
.goallinelive-player-container:-webkit-full-screen,
.goallinelive-player-container:-moz-full-screen,
.goallinelive-player-container:-ms-fullscreen {
    /* Ensure container fills screen */
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important; /* Override aspect ratio */
    background-color: #000;
}

/* Ensure video/iframe fills fullscreen container */
.goallinelive-player-container:fullscreen > *,
.goallinelive-player-container:-webkit-full-screen > *,
.goallinelive-player-container:-moz-full-screen > *,
.goallinelive-player-container:-ms-fullscreen > * {
    /* This targets direct children like video, iframe, placeholder, loaded-player */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Style for watermark when CONTAINER is fullscreen */
.goallinelive-player-container:fullscreen .goallinelive-watermark,
.goallinelive-player-container:-webkit-full-screen .goallinelive-watermark,
.goallinelive-player-container:-moz-full-screen .goallinelive-watermark,
.goallinelive-player-container:-ms-fullscreen .goallinelive-watermark {
    position: absolute; /* Keep absolute relative to container */
    z-index: 2147483646; /* High z-index, but allow player controls potentially higher */
    /* Optional: Adjust size/opacity for fullscreen */
    /* max-width: 10%; max-height: 10%; opacity: 0.9; */
}

/* Case 2: The VIDEO element itself goes fullscreen (less common with wrappers) */
/* This requires the watermark to be a SIBLING of the video element */
/* Note: The PHP currently places watermark inside the container, before the video/iframe */

/* If video goes fullscreen, make sibling watermark fixed */
video:fullscreen ~ .goallinelive-watermark,
video:-webkit-full-screen ~ .goallinelive-watermark,
video:-moz-full-screen ~ .goallinelive-watermark,
video:-ms-fullscreen ~ .goallinelive-watermark {
   display: block !important; /* Ensure visibility */
   position: fixed !important; /* Use fixed positioning relative to viewport */
   z-index: 2147483647 !important; /* Highest z-index */
   /* Re-apply positioning using fixed coordinates */
   /* Example for top-right */
   /* top: 10px; right: 10px; bottom: auto; left: auto; transform: none; */
}

/* Example: Reposition top-right watermark when VIDEO is fullscreen */
video:fullscreen ~ .watermark-position-top-right,
video:-webkit-full-screen ~ .watermark-position-top-right,
video:-moz-full-screen ~ .watermark-position-top-right,
video:-ms-fullscreen ~ .watermark-position-top-right {
    top: 20px !important;
    right: 20px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
}
/* Add similar rules for other positions if needed, using !important */
video:fullscreen ~ .watermark-position-top-left, video:-webkit-full-screen ~ .watermark-position-top-left { top: 20px !important; left: 20px !important; bottom: auto !important; right: auto !important; transform: none !important; }
video:fullscreen ~ .watermark-position-bottom-right, video:-webkit-full-screen ~ .watermark-position-bottom-right { bottom: 20px !important; right: 20px !important; top: auto !important; left: auto !important; transform: none !important; }
video:fullscreen ~ .watermark-position-bottom-left, video:-webkit-full-screen ~ .watermark-position-bottom-left { bottom: 20px !important; left: 20px !important; top: auto !important; right: auto !important; transform: none !important; }
/* ... etc for other positions and browser prefixes ... */

/* Ensure Video.js controls don't completely obscure watermark */
.video-js.vjs-user-active .vjs-control-bar {
    /* Optional: Add slight transparency to control bar when active */
    /* background-color: rgba(43, 51, 63, 0.7); */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .goallinelive-telegram-overlay { bottom: 10px; right: 10px; max-width: 250px; padding: 10px; }
    .goallinelive-ad-header, .goallinelive-ad-footer { max-width: 90%; }
    .goallinelive-text-watermark { font-size: 12px; padding: 3px; }
}
@media (max-width: 480px) {
    .goallinelive-text-watermark { font-size: 10px; }
    .goallinelive-watermark { max-width: 20%; max-height: 20%; } /* Slightly larger on small screens */
}


.video-js {
    width: 100% !important;
    height: 100% !important;
}



/* Ensure player divs (like Clappr, DPlayer) also fill the container */
.goallinelive-player-container div[data-player-type] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Ensure no borders interfere */
}

/*  Plyr  */
.goallinelive-player-wrapper{
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
}
.goallinelive-player-wrapper .plyr{
     width: 100%!important;
    height: 100%!important;
}