body{padding:0;margin:0;font-family:arial;background-image:url('../img/bg1k.jpg');background-size:cover;font-size:16px;}
div{box-sizing:border-box;}
/* Ensure form controls don't overflow their containers */
.content_ytdl_first_page_container_element input,
.content_ytdl_first_page_container_element select,
.content_ytdl_first_page_container_element button{
    box-sizing:border-box;
    width:100%;
    max-width:100%;
}

.content{width:100%;text-align:center;}

.content_inner_header{width:100%;max-width:1200px;height:100px;text-align:center;margin:10px auto 10px auto;border-radius:10px;box-sizing:border-box;border:1px solid black;background:rgba(255,255,255,0.7);}

.content_inner{width:100%;max-width:1200px;margin:10px auto 10px auto;border-radius:10px;padding:10px;box-sizing:border-box;border:1px solid black;text-align:center;background:rgba(255,255,255,0.7);transition:all 500ms;}

.content_inner_footer{width:100%;max-width:1200px;text-align:center;margin:10px auto 10px auto;border-radius:10px;padding:20px;box-sizing:border-box;border:1px solid black;background:rgba(255,255,255,0.7);}

.content_ytdl_first_page_container{display:flex;flex-direction:column;width:90%;text-align:left;margin:10px auto 10px auto;box-sizing:border-box;padding:10px 0;}


.content_ytdl_first_page_container_line{display:flex;flex-direction:row;flex-flow: wrap;}

.content_ytdl_first_page_container_element{box-sizing:border-box;margin:0 0 10px 0;}


.content_ytdl_first_page_container_element.ytlink{flex:1 0 80%;padding:0 10px 0 0;}
.content_ytdl_first_page_container_element.ytlink>input{width:100%;max-width:100%;border-radius:10px;font-size:18px;padding:12px 14px;}

.content_ytdl_first_page_container_element.nextbutton{flex:1 0 20%;}
.content_ytdl_first_page_container_element.nextbutton>button{width:100%;max-width:100%;font-size:18px;padding:12px 14px;font-weight:bold;min-height:48px;}



.content_ytdl_first_page_container_element.encodeinformation{flex:1 0 80%;}

.content_ytdl_first_page_container_element.ytdltype{flex:1 0 20%;}
.content_ytdl_first_page_container_element.ytdltype>select{width:100%;max-width:100%;font-size:18px;padding:12px 14px;font-weight:bold;}












.content_ytdl_secound_page_container{display:flex;flex-direction:column;width:90%;text-align:left;margin:10px auto 10px auto;box-sizing:border-box;/*background:#CACACA;border:1px solid white;*/border-radius:10px;padding:10px 0;}



.content_ytdl_first_page_container_element.ytdlbitrate{flex:1 0 20%;}
.content_ytdl_first_page_container_element.ytdlbitrate>select{width:100%;font-size:18px;padding:12px 14px;font-weight:bold;}

.content_ytdl_first_page_container_element.nextbutton button{width:100%;font-size:15px;padding:5px 10px 5px 10px;font-weight:bold;}



.content_inner_top{display:flex;flex-direction:column;width:90%;margin:0px auto 20px auto;}
.content_inner_top_headline{font-weight:bold;font-size:24px;padding:5px 0;text-align:left;}
.content_inner_top_text{font-size:16px;padding:5px 0;text-align:left;}

/* Simple tabs */
.tabs{margin-top:10px; display:flex; gap:8px; position:relative; z-index:2;}
.tab-button{border:1px solid #000;background:#fff;border-radius:6px 6px 0 0;padding:8px 12px;margin-right:6px;cursor:pointer;}
.tab-button.active{background:#e9e9ff;border-bottom-color:transparent;}
.tab-content{border-top:1px solid #000; padding-top:10px;}

/* Mode-based visibility to avoid breaking step visibility */
body.mode-playlist .tab-single{ display:none !important; }
body.mode-single .tab-playlist{ display:none !important; }



.content_inner_bottom{display:flex;flex-direction:row;justify-content:space-between;width:90%;margin:20px auto 20px auto;}
.content_inner_bottom_item{display:flex;flex-direction:row;flex:1;max-width:30%;}
.content_inner_bottom_item_left{background:#383384;width:30px;padding:5px 0 0 0;text-align:center;font-size:16px;font-weight:bold;color:#FFF;border-top-left-radius:10px;border-bottom-left-radius:10px;}
.content_inner_bottom_item_right{flex:1;border-top-right-radius:10px;border-bottom-right-radius:10px;}
.content_inner_bottom_headline{font-weight:bold;font-size:16px;padding:5px;text-align:left;}
.content_inner_bottom_text{font-size:16px;padding:5px;text-align:left;}

 

.videoPreviewContainer{width:500px;margin:10px auto 10px auto;}
#videoPreviewHeadline{font-size:16px;font-weight:bold;margin:10px 0 10px 0;}
#videoPreviewThumbnail img{width:500px;}

#videoPreviewHeadline_mp4{font-size:16px;font-weight:bold;margin:10px 0 10px 0;}
#videoPreviewThumbnail_mp4 img{width:500px;}


.boldText{font-weight:bold;margin:0 0 10px 0;text-align:left;}



.content_ytdl_third_page_container{display:flex;flex-direction:column;width:90%;text-align:left;margin:10px auto 10px auto;box-sizing:border-box;/*background:#CACACA;border:1px solid white;*/border-radius:10px;padding:10px 0;}








@media screen and (max-width: 768px) {

	.content_ytdl_first_page_container_line {
		flex-direction: column;
		flex-flow: column;
	}

	.content_inner_header{height:auto;padding:12px;}
	.content_inner_header h1{font-size:28px;margin:0;}
	.content_inner{padding:10px;}
	.content_inner_top_headline{font-size:22px;}
	.content_inner_top_text{font-size:18px;}

	/* Base font size for better readability */
	html, body { font-size:18px; line-height:1.5; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
	.content, .content_inner, .content_inner_header, .content_inner_footer { font-size:18px; }
	button, input, select { font-size:18px !important; }
    
    .content_inner_bottom {
        display:block;
    }
	
	.content_inner_bottom_item {
		max-width: 100%;
		margin-bottom:20px;
	}

	.content_ytdl_first_page_container_element{flex:0 !important;padding:0 !important;}
	
	.content_ytdl_first_page_container_element.ytlink{order:1;}
	.content_ytdl_first_page_container_element.ytdltype{order:2;}
	.content_ytdl_first_page_container_element.encodeinformation{order:200;}
	.content_ytdl_first_page_container_element.nextbutton{order:100;}
	
	
	
	.content_ytdl_first_page_container_element.ytdlbitrate{order:2;}
	.content_ytdl_first_page_container_element.nextbutton.jumpover{margin-top:30px;}
	
	
	
	
	.videoPreviewContainer{width:100%;}
	#videoPreviewThumbnail img{width:100%;height:auto;}
		#videoPreviewThumbnail_mp4 img{width:100%;height:auto;}

		/* Improve tap targets */
        .content_ytdl_first_page_container_element.nextbutton>button,
        .content_ytdl_first_page_container_element select,
        .content_ytdl_first_page_container_element input{
            font-size:18px;
            min-height:48px;
            padding:12px 14px;
            width:100%;
            max-width:100%;
            box-sizing:border-box;
        }

		/* Override more specific desktop rules */
		.content_ytdl_first_page_container_element.ytlink>input{font-size:18px;min-height:48px;padding:12px 14px;}
		.content_ytdl_first_page_container_element.ytdltype>select{font-size:18px;min-height:48px;padding:12px 14px;}
		.content_ytdl_first_page_container_element.ytdlbitrate>select{font-size:18px;min-height:48px;padding:12px 14px;}
		.content_ytdl_first_page_container_element.nextbutton>button{font-size:18px;min-height:48px;padding:12px 14px;}

	/* Larger labels in steps */
		.content_inner_bottom_headline{font-size:18px;}
		.content_inner_bottom_text{font-size:18px;}

		.progress-label{font-size:18px;}
}

@media screen and (max-width: 480px) {
	.content_inner_header h1{font-size:24px;}
	.content_inner_top_headline{font-size:19px;}
	.content_inner_top_text{font-size:16px;}
	.content_ytdl_first_page_container_element.nextbutton>button{font-size:18px;}
}

/* Smooth progressbar width updates */
.ui-progressbar-value{
    transition: width 0.3s ease;
}

/* Pulsing label for starting state */
@keyframes ytdl-pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}
.progress-label.pulsing{
    animation: ytdl-pulse 1.2s ease-in-out infinite;
}

/* Temporarily hide tab buttons */
.tabs{ display:none !important; }