/* Webinar Archive Icons - Fallback Solution */

/* If Font Awesome isn't working, we'll use CSS-only icons and Unicode */

/* Base icon styling */
.icon-fallback {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    vertical-align: middle;
}

/* Video icon for hero title */
.hero-title .icon-video::before {
    content: "🎥";
    font-size: 1.2em;
    margin-left: 0.5rem;
}

/* Folder icon for categories */
.filter-section h3 .icon-folder::before {
    content: "📁";
    font-size: 1em;
    margin-left: 0.25rem;
}

/* Filter icon */
.filter-section h3 .icon-filter::before {
    content: "⚙️";
    font-size: 1em;
    margin-left: 0.25rem;
}

/* Search icon */
.filter-section h3 .icon-search::before {
    content: "🔍";
    font-size: 1em;
    margin-left: 0.25rem;
}

/* Calendar icon */
.webinar-date .icon-calendar::before {
    content: "📅";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* Time icon */
.webinar-time .icon-clock::before {
    content: "🕒";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* Duration icon */
.webinar-duration .icon-duration::before {
    content: "⏱️";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* Price icon */
.webinar-price .icon-price::before {
    content: "🏷️";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* User/Speaker icon */
.webinar-speaker .icon-user::before {
    content: "👨‍💼";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* Status badges icons */
.status-badge .icon-clock::before {
    content: "⏰";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

.status-badge .icon-live::before {
    content: "🔴";
    font-size: 0.9em;
    margin-left: 0.25rem;
    animation: pulse 2s infinite;
}

.status-badge .icon-completed::before {
    content: "✅";
    font-size: 0.9em;
    margin-left: 0.25rem;
}

/* Arrow icon for buttons */
.btn-view-webinar .icon-arrow::before {
    content: "←";
    font-size: 1em;
    margin-right: 0.25rem;
    font-weight: bold;
}

/* CSS-only icons using borders and pseudo-elements */

/* Search icon CSS version */
.css-search-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.css-search-icon::before {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.css-search-icon::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 0.4em;
    background: currentColor;
    transform: rotate(45deg);
    bottom: 0;
    right: 0;
}

/* Calendar icon CSS version */
.css-calendar-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.css-calendar-icon::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 20%;
    width: 2px;
    height: 8px;
    background: currentColor;
    box-shadow: 0.4em 0 currentColor;
}

.css-calendar-icon::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 20%;
    width: 60%;
    height: 2px;
    background: currentColor;
    box-shadow: 0 0.3em currentColor;
}

/* User icon CSS version */
.css-user-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.css-user-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    width: 0.5em;
    height: 0.5em;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.css-user-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1em;
    height: 0.6em;
    border: 2px solid currentColor;
    border-radius: 0.5em 0.5em 0 0;
    border-bottom: none;
}

/* Clock icon CSS version */
.css-clock-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.css-clock-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 0.4em;
    background: currentColor;
    transform-origin: bottom;
    transform: translate(-50%, -100%) rotate(0deg);
}

.css-clock-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 0.25em;
    background: currentColor;
    transform-origin: bottom;
    transform: translate(-50%, -100%) rotate(90deg);
}

/* Filter icon CSS version */
.css-filter-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.css-filter-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 2px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
}

.css-filter-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40%;
    width: 2px;
    height: 0.6em;
    background: currentColor;
}

/* Arrow icon CSS version */
.css-arrow-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.css-arrow-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.8em;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

.css-arrow-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0.4em;
    height: 0.4em;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

/* Hourglass/Duration icon CSS version */
.css-hourglass-icon {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-radius: 2px;
}

.css-hourglass-icon::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 50%, 100% 100%, 0 100%, 50% 50%);
}

.css-hourglass-icon::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 30%;
    width: 40%;
    height: 20%;
    background: currentColor;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .icon-fallback {
        font-size: 0.9em;
    }
    
    .css-search-icon,
    .css-calendar-icon,
    .css-user-icon,
    .css-clock-icon,
    .css-filter-icon,
    .css-arrow-icon,
    .css-hourglass-icon {
        transform: scale(0.9);
    }
}