/* ============================================
   CSS VARIABLES & DESIGN TOKENS - HOJAYFA
   ============================================ */
:root {
    /* Color Palette - Red Theme - Hojayfa1 */
    --hojayfa-color-primary1: #dc2626;
    --hojayfa-color-primary-dark1: #b91c1c;
    --hojayfa-color-primary-light1: #ef4444;
    --hojayfa-color-success1: #dc2626;
    --hojayfa-color-error1: #dc2626;
    --hojayfa-color-warning1: #f59e0b;
    --hojayfa-color-info1: #dc2626;
    
    /* Neutrals - Darker Theme - Hojayfa2 */
    --hojayfa-color-bg2: #1a1a1a;
    --hojayfa-color-bg-secondary2: #252525;
    --hojayfa-color-bg-tertiary2: #2d2d2d;
    --hojayfa-color-border2: #3a3a3a;
    --hojayfa-color-border-hover2: #4a4a4a;
    --hojayfa-color-text2: #f5f5f5;
    --hojayfa-color-text-secondary2: #b0b0b0;
    --hojayfa-color-text-tertiary2: #808080;
    
    /* Shadows - Darker - Hojayfa3 */
    --hojayfa-shadow-sm3: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --hojayfa-shadow-md3: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --hojayfa-shadow-lg3: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --hojayfa-shadow-xl3: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    
    /* Spacing - Hojayfa4 */
    --hojayfa-spacing-xs4: 0.25rem;
    --hojayfa-spacing-sm4: 0.5rem;
    --hojayfa-spacing-md4: 1rem;
    --hojayfa-spacing-lg4: 1.5rem;
    --hojayfa-spacing-xl4: 2rem;
    --hojayfa-spacing-2xl4: 3rem;
    
    /* Border Radius - Hojayfa5 */
    --hojayfa-radius-sm5: 0.375rem;
    --hojayfa-radius-md5: 0.5rem;
    --hojayfa-radius-lg5: 0.75rem;
    --hojayfa-radius-xl5: 1rem;
    
    /* Typography - Hojayfa6 */
    --hojayfa-font-sans6: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --hojayfa-font-mono6: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}

/* ============================================
   GLOBAL STYLES - HOJAYFA
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================
   COMPONENT: CONTAINER - HOJAYFA1
   ============================================ */
.hojayfa-container1 {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--hojayfa-spacing-xl4) var(--hojayfa-spacing-lg4);
}

@media (max-width: 768px) {
    .hojayfa-container1 {
        padding: var(--hojayfa-spacing-lg4) var(--hojayfa-spacing-md4);
    }
}

/* ============================================
   COMPONENT: HERO / TITLE SECTION - HOJAYFA2
   ============================================ */
.hojayfa-hero2 {
            text-align: center;
            margin-bottom: 1.5rem;
            padding: 1rem 0;
	color: #f70c3f;
        }

.hojayfa-hero2 h1 {
            font-size: 22px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

.hojayfa-hero2 p {
    font-size: 1.125rem;
    color: var(--hojayfa-color-text-secondary2);
    max-width: 600px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hojayfa-hero2 h1 {
        font-size: 1.875rem;
    }
    .hojayfa-hero2 p {
        font-size: 1rem;
    }
}

/* ============================================
   COMPONENT: UPLOAD AREA - HOJAYFA3
   ============================================ */
.hojayfa-upload-area3 {
   border: 3px dashed rgba(239, 68, 68, 0.5);
    border-radius: var(--hojayfa-radius-xl5);
    padding: var(--hojayfa-spacing-2xl4);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    margin-bottom: var(--hojayfa-spacing-xl4);
}

.hojayfa-upload-area3.hojayfa-drag-over3 {
    border-color: var(--hojayfa-color-primary1);
    background-color: var(--hojayfa-color-bg-tertiary2);
    transform: scale(1.01);
}

.hojayfa-upload-icon3 {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--hojayfa-spacing-md4);
    color: var(--hojayfa-color-primary1);
}

.hojayfa-upload-area3 h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: var(--hojayfa-spacing-sm4);
    color: var(--hojayfa-color-text2);
}

.hojayfa-upload-area3 p {
    color: var(--hojayfa-color-text-secondary2);
    margin-bottom: var(--hojayfa-spacing-lg4);
}

.hojayfa-upload-hint3 {
    font-size: 0.875rem;
    color: var(--hojayfa-color-text-tertiary2);
    margin-top: var(--hojayfa-spacing-md4);
}

/* ============================================
   COMPONENT: BUTTON - RED THEME - HOJAYFA4
   ============================================ */
.hojayfa-btn4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--hojayfa-spacing-sm4);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--hojayfa-radius-md5);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

.hojayfa-btn4:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.hojayfa-btn-primary4 {
    background: var(--hojayfa-color-primary1);
    color: white;
}

.hojayfa-btn-primary4:hover:not(:disabled) {
    background: var(--hojayfa-color-primary-dark1);
    transform: translateY(-1px);
    box-shadow: var(--hojayfa-shadow-md3);
}

.hojayfa-btn-secondary4 {
    background: var(--hojayfa-color-bg-tertiary2);
    color: var(--hojayfa-color-text2);
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-btn-secondary4:hover:not(:disabled) {
    background: var(--hojayfa-color-bg-secondary2);
    border-color: var(--hojayfa-color-border-hover2);
}

.hojayfa-btn-success4 {
    background: var(--hojayfa-color-primary1);
    color: white;
}

.hojayfa-btn-success4:hover:not(:disabled) {
    background: var(--hojayfa-color-primary-dark1);
}

.hojayfa-btn-sm4 {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.hojayfa-btn-icon4 {
    padding: 0.5rem;
    width: 36px;
    height: 36px;
}

/* ============================================
   COMPONENT: CONTROLS SECTION - HOJAYFA5
   ============================================ */
.hojayfa-controls5 {
    background-color: var(--hojayfa-color-bg-secondary2);
    border-radius: var(--hojayfa-radius-lg5);
    padding: var(--hojayfa-spacing-lg4);
    margin-bottom: var(--hojayfa-spacing-xl4);
    box-shadow: var(--hojayfa-shadow-sm3);
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-controls-header5 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hojayfa-spacing-lg4);
    flex-wrap: wrap;
    gap: var(--hojayfa-spacing-md4);
}

.hojayfa-controls-title5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hojayfa-color-text2);
}

.hojayfa-controls-actions5 {
    display: flex;
    gap: var(--hojayfa-spacing-sm4);
    flex-wrap: wrap;
}

.hojayfa-advanced-options5 {
    border-top: 1px solid var(--hojayfa-color-border2);
    padding-top: var(--hojayfa-spacing-lg4);
    margin-top: var(--hojayfa-spacing-lg4);
}

.hojayfa-advanced-options-toggle5 {
    background: none;
    border: none;
    color: var(--hojayfa-color-primary1);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--hojayfa-spacing-xs4);
    padding: var(--hojayfa-spacing-sm4) 0;
    margin-bottom: var(--hojayfa-spacing-md4);
}

.hojayfa-advanced-options-content5 {
    display: none;
    gap: var(--hojayfa-spacing-lg4);
    flex-direction: column;
}

.hojayfa-advanced-options-content5.hojayfa-active5 {
    display: flex;
}

.hojayfa-option-group5 {
    display: flex;
    flex-direction: column;
    gap: var(--hojayfa-spacing-sm4);
}

.hojayfa-option-group5 label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--hojayfa-color-text2);
    display: flex;
    align-items: center;
    gap: var(--hojayfa-spacing-sm4);
}

.hojayfa-option-group5 input[type="range"] {
    width: 100%;
    accent-color: var(--hojayfa-color-primary1);
}

.hojayfa-option-group5 input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--hojayfa-color-primary1);
}

.hojayfa-option-group5 select {
    background: var(--hojayfa-color-bg-tertiary2);
    color: var(--hojayfa-color-text2);
    border: 1px solid var(--hojayfa-color-border2);
    padding: 0.5rem;
    border-radius: var(--hojayfa-radius-sm5);
}

.hojayfa-option-description5 {
    font-size: 0.75rem;
    color: var(--hojayfa-color-text-secondary2);
    margin-top: var(--hojayfa-spacing-xs4);
}

/* ============================================
   COMPONENT: PROGRESS BAR - HOJAYFA1
   ============================================ */
.hojayfa-global-progress1 {
    background: var(--hojayfa-color-bg-secondary2);
    border-radius: var(--hojayfa-radius-lg5);
    padding: var(--hojayfa-spacing-lg4);
    margin-bottom: var(--hojayfa-spacing-xl4);
    box-shadow: var(--hojayfa-shadow-sm3);
    border: 1px solid var(--hojayfa-color-border2);
    display: none;
}

.hojayfa-global-progress1.hojayfa-active5 {
    display: block;
}

.hojayfa-progress-header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--hojayfa-spacing-md4);
}

.hojayfa-progress-title1 {
    font-weight: 600;
    color: var(--hojayfa-color-text2);
}

.hojayfa-progress-stats1 {
    font-size: 0.875rem;
    color: var(--hojayfa-color-text-secondary2);
}

.hojayfa-progress-bar-container1 {
    width: 100%;
    height: 8px;
    background: var(--hojayfa-color-bg-tertiary2);
    border-radius: 999px;
    overflow: hidden;
}

.hojayfa-progress-bar-fill1 {
    height: 100%;
    background: linear-gradient(90deg, var(--hojayfa-color-primary1), var(--hojayfa-color-primary-light1));
    border-radius: 999px;
    transition: width 0.3s ease;
    width: 0%;
}

/* ============================================
   COMPONENT: FILE GALLERY / QUEUE - HOJAYFA2
   ============================================ */
.hojayfa-file-gallery2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--hojayfa-spacing-lg4);
    margin-bottom: var(--hojayfa-spacing-xl4);
}

@media (max-width: 640px) {
    .hojayfa-file-gallery2 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   COMPONENT: FILE CARD - HOJAYFA3
   ============================================ */
.hojayfa-file-card3 {
    background-color: var(--hojayfa-color-bg-secondary2);
    border-radius: var(--hojayfa-radius-lg5);
    overflow: hidden;
    box-shadow: var(--hojayfa-shadow-md3);
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-file-card3:hover {
    transform: translateY(-2px);
    box-shadow: var(--hojayfa-shadow-lg3);
    border-color: var(--hojayfa-color-border-hover2);
}

.hojayfa-file-card3.hojayfa-selected3 {
    outline: 2px solid var(--hojayfa-color-primary1);
    outline-offset: 2px;
}

.hojayfa-file-thumbnail3 {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: var(--hojayfa-color-bg-tertiary2);
    cursor: pointer;
}

.hojayfa-file-info3 {
    padding: var(--hojayfa-spacing-md4);
}

.hojayfa-file-name3 {
    font-weight: 600;
    color: var(--hojayfa-color-text2);
    margin-bottom: var(--hojayfa-spacing-xs4);
    font-size: 0.875rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.hojayfa-file-name-truncated3 {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.hojayfa-file-meta3 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hojayfa-spacing-sm4);
    margin-bottom: var(--hojayfa-spacing-md4);
    font-size: 0.75rem;
    color: var(--hojayfa-color-text-secondary2);
}

.hojayfa-file-meta3 span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hojayfa-file-status3 {
    display: inline-flex;
    align-items: center;
    gap: var(--hojayfa-spacing-xs4);
    padding: 0.25rem 0.5rem;
    border-radius: var(--hojayfa-radius-sm5);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: var(--hojayfa-spacing-md4);
}

.hojayfa-file-status3.hojayfa-queued3 {
    background: var(--hojayfa-color-bg-tertiary2);
    color: var(--hojayfa-color-text-secondary2);
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-file-status3.hojayfa-converting3 {
    background: rgba(220, 38, 38, 0.2);
    color: var(--hojayfa-color-primary-light1);
    border: 1px solid var(--hojayfa-color-primary1);
}

.hojayfa-file-status3.hojayfa-done3 {
    background: rgba(220, 38, 38, 0.2);
    color: var(--hojayfa-color-primary-light1);
    border: 1px solid var(--hojayfa-color-primary1);
}

.hojayfa-file-status3.hojayfa-error3 {
    background: rgba(220, 38, 38, 0.3);
    color: var(--hojayfa-color-primary-light1);
    border: 1px solid var(--hojayfa-color-primary1);
}

.hojayfa-file-progress3 {
    width: 100%;
    height: 4px;
    background: var(--hojayfa-color-bg-tertiary2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--hojayfa-spacing-md4);
}

.hojayfa-file-progress-fill3 {
    height: 100%;
    background: var(--hojayfa-color-primary1);
    border-radius: 999px;
    transition: width 0.3s ease;
    width: 0%;
}

.hojayfa-file-actions3 {
    display: flex;
    gap: var(--hojayfa-spacing-sm4);
}

.hojayfa-file-actions3 .hojayfa-btn4 {
    flex: 1;
}

.hojayfa-file-select3 {
    position: absolute;
    top: var(--hojayfa-spacing-md4);
    left: var(--hojayfa-spacing-md4);
    width: 24px;
    height: 24px;
    cursor: pointer;
    z-index: 10;
    accent-color: var(--hojayfa-color-primary1);
}

/* ============================================
   COMPONENT: PREVIEW SECTION - HOJAYFA4
   ============================================ */
.hojayfa-preview-section4 {
    background-color: var(--hojayfa-color-bg-secondary2);
    border-radius: var(--hojayfa-radius-lg5);
    padding: var(--hojayfa-spacing-lg4);
    margin-bottom: var(--hojayfa-spacing-xl4);
    box-shadow: var(--hojayfa-shadow-sm3);
    border: 1px solid var(--hojayfa-color-border2);
    display: none;
}

.hojayfa-preview-section4.hojayfa-active5 {
    display: block;
}

.hojayfa-preview-header4 {
    margin-bottom: var(--hojayfa-spacing-lg4);
}

.hojayfa-preview-header4 h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hojayfa-color-text2);
    margin-bottom: var(--hojayfa-spacing-sm4);
}

.hojayfa-preview-filename4 {
    font-size: 0.875rem;
    color: var(--hojayfa-color-text-secondary2);
}

.hojayfa-preview-container4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--hojayfa-spacing-lg4);
}

.hojayfa-preview-item4 {
    background-color: var(--hojayfa-color-bg-tertiary2);
    border-radius: var(--hojayfa-radius-md5);
    padding: var(--hojayfa-spacing-md4);
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-preview-item4 h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--hojayfa-spacing-md4);
    color: var(--hojayfa-color-text2);
}

.hojayfa-preview-image4 {
    width: 100%;
    border-radius: var(--hojayfa-radius-sm5);
    border: 1px solid var(--hojayfa-color-border2);
    background: var(--hojayfa-color-bg2);
    display: block;
    max-height: 400px;
    object-fit: contain;
}

.hojayfa-preview-info4 {
    margin-top: var(--hojayfa-spacing-md4);
    font-size: 0.875rem;
    color: var(--hojayfa-color-text-secondary2);
}

/* ============================================
   COMPONENT: TOAST NOTIFICATION - HOJAYFA5
   ============================================ */
.hojayfa-toast-container5 {
    position: fixed;
    top: var(--hojayfa-spacing-lg4);
    right: var(--hojayfa-spacing-lg4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--hojayfa-spacing-sm4);
    max-width: 400px;
}

.hojayfa-toast5 {
    background: var(--hojayfa-color-bg-secondary2);
    border-radius: var(--hojayfa-radius-md5);
    padding: var(--hojayfa-spacing-md4);
    box-shadow: var(--hojayfa-shadow-xl3);
    display: flex;
    align-items: start;
    gap: var(--hojayfa-spacing-md4);
    animation: hojayfa-slideIn5 0.3s ease;
    border-left: 4px solid var(--hojayfa-color-primary1);
    border: 1px solid var(--hojayfa-color-border2);
}

.hojayfa-toast5.hojayfa-success5 {
    border-left-color: var(--hojayfa-color-primary1);
}

.hojayfa-toast5.hojayfa-error5 {
    border-left-color: var(--hojayfa-color-primary1);
}

.hojayfa-toast5.hojayfa-warning5 {
    border-left-color: var(--hojayfa-color-warning1);
}

.hojayfa-toast-content5 {
    flex: 1;
}

.hojayfa-toast-title5 {
    font-weight: 600;
    margin-bottom: var(--hojayfa-spacing-xs4);
    font-size: 0.875rem;
    color: var(--hojayfa-color-text2);
}

.hojayfa-toast-message5 {
    font-size: 0.875rem;
    color: var(--hojayfa-color-text-secondary2);
}

.hojayfa-toast-close5 {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hojayfa-color-text-tertiary2);
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes hojayfa-slideIn5 {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ============================================
   UTILITY CLASSES - HOJAYFA1
   ============================================ */
.hojayfa-hidden1 {
    display: none !important;
}

.hojayfa-spinner1 {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--hojayfa-color-primary1);
    border-right-color: transparent;
    border-radius: 50%;
    animation: hojayfa-spin1 0.6s linear infinite;
}

@keyframes hojayfa-spin1 {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE - HOJAYFA2
   ============================================ */
.hojayfa-empty-state2 {
    text-align: center;
    padding: var(--hojayfa-spacing-2xl4);
    color: var(--hojayfa-color-text-secondary2);
    display: none;
}

.hojayfa-empty-state2.hojayfa-active5 {
    display: block;
}

.hojayfa-empty-state2 svg {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--hojayfa-spacing-md4);
    opacity: 0.5;
    color: var(--hojayfa-color-text-tertiary2);
}