/**
 * External Assignments Styles
 *
 * @package Coursee
 * @since 1.0.0
 */

.external-assignment-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-xl, 1rem);
    padding: var(--space-6, 1.5rem);
    margin: var(--space-6, 1.5rem) 0;
    color: white;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.external-assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4, 1rem);
}

.external-assignment-header h3 {
    margin: 0;
    color: white;
    font-size: var(--text-xl, 1.25rem);
}

.platform-badge {
    display: inline-block;
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
}

.external-assignment-content p {
    margin-bottom: var(--space-3, 0.75rem);
    color: rgba(255, 255, 255, 0.9);
}

.tracking-notice {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
}

.tracking-notice .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.external-assignment-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    background: white;
    color: #667eea;
    border: none;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-radius: var(--radius-lg, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    transition: all var(--transition-base, 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.external-assignment-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    color: #764ba2;
}

.external-assignment-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Video Embed Styles */
.coursee-external-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    margin: var(--space-6, 1.5rem) 0;
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.coursee-external-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.lesson-video-player {
    margin-bottom: var(--space-6, 1.5rem);
}

.lesson-video-player iframe {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}