/* SMCWS Player Public Styles */

.smcws-player-container {
    width: 100%;
    max-width: 800px; /* Adjust max-width as needed */
    margin: 20px auto; /* Default to center alignment */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: 'Inter', sans-serif; /* Consistent font */
    border: 1px solid #eee;
}

/* Alignment classes for the container */
.smcws-player-align-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.smcws-player-align-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.smcws-player-align-right {
    margin-left: auto !important;
    margin-right: 0 !important;
}


.smcws-player-title {
    font-size: 1.8em;
    color: #2c3e50;
    padding: 20px 25px 10px;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

.smcws-player-media-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio - default for responsive height */
    height: 0; /* Ensures padding-bottom controls height */
    overflow: hidden;
    background-color: #000; /* Fallback background for media */
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
}

.smcws-player-media-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.smcws-player-media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: contain; /* Keep for video to ensure entire media is visible */
}

/* Styling for the image link wrapper */
.smcws-player-image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; /* Make the link fill the wrapper */
    overflow: hidden; /* Hide overflow if image is larger than container */
}

.smcws-player-media-wrapper img {
    display: block; /* Ensure image behaves as a block */
    width: 100%; /* Default to fill width */
    height: 100%; /* Default to fill height */
    object-position: center; /* Default to center alignment */
}

/* Image Display Modes */
.smcws-player-image-contain img {
    object-fit: contain; /* Scales the image to fit the content box, preserving its aspect ratio. The entire image is visible. */
}

.smcws-player-image-cover img {
    object-fit: cover; /* Scales the image to cover the content box, preserving its aspect ratio. Parts of the image may be cropped. */
}

.smcws-player-image-fill img,
.smcws-player-image-stretch-vertical img, /* New: Stretch Vertical - will behave like 'fill' in 16:9 container */
.smcws-player-image-stretch-horizontal img { /* New: Stretch Horizontal - will behave like 'fill' in 16:9 container */
    object-fit: fill; /* Stretches the image to fill the content box, regardless of its aspect ratio. The image may be distorted. */
}


/* Specific styling for YouTube iframes to remove default borders/shadows */
.smcws-player-youtube iframe,
.smcws-player-youtube-live iframe {
    box-shadow: none;
    border-radius: 0 0 10px 10px;
}

.smcws-player-description {
    padding: 20px 25px;
    font-size: 1em;
    color: #555;
    line-height: 1.6;
    border-top: 1px solid #f0f0f0;
}

.smcws-player-error {
    color: #dc3232;
    background-color: #ffebe8;
    border: 1px solid #dc3232;
    padding: 15px;
    margin: 20px auto;
    border-radius: 8px;
    max-width: 800px;
    text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .smcws-player-container {
        margin: 15px auto;
        border-radius: 8px;
    }

    .smcws-player-title {
        font-size: 1.5em;
        padding: 15px 20px 8px;
    }

    .smcws-player-description {
        padding: 15px 20px;
        font-size: 0.95em;
    }

    .smcws-player-media-wrapper {
        border-radius: 0 0 8px 8px;
    }
}

@media (max-width: 480px) {
    .smcws-player-container {
        margin: 10px auto;
        border-radius: 5px;
    }

    .smcws-player-title {
        font-size: 1.3em;
        padding: 10px 15px 5px;
    }

    .smcws-player-description {
        padding: 10px 15px;
        font-size: 0.9em;
    }

    .smcws-player-media-wrapper {
        border-radius: 0 0 5px 5px;
    }
}