/*
============================================================
  Audio to Video Generator - Cohesive Light Theme CSS
  Matches the "How to Use This Tool" section style
============================================================
*/

/* 
  This body style is optional but will create the light grey 
  background seen in your screenshot, making the white cards stand out.
  If your theme already handles this, you can remove this part.
*/
body {
    background-color: #f8f9fa; 
}

/* Main container for the entire plugin - The White Card */
.atv-container {
    max-width: 550px;
    margin: 40px auto;
    padding: 30px 35px;
    background-color: #ffffff; /* Clean white card background */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); /* Soft, subtle shadow */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 1px solid #eaeaea; /* Light border for definition */
}

/* Header section with icon and title */
.atv-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.atv-header .fa-video {
    font-size: 26px;
    color: #FFC107; /* Using the highlight yellow for the main icon */
    margin-right: 12px;
}

.atv-header h2 {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50; /* Dark, professional text color */
    margin: 0;
}

/* Subtitle text */
.atv-subtitle {
    font-size: 16px;
    color: #7f8c8d; /* Softer grey for subtitle */
    margin-bottom: 25px;
    text-align: left;
}

/* Flex container for the two upload boxes */
.atv-upload-areas {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

/* Styling for each individual upload box */
.atv-upload-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    border: 2px dashed #dce1e6; /* Dashed border */
    border-radius: 8px;
    background-color: #fdfdfd;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, border-color 0.3s;
}

.atv-upload-box:hover {
    background-color: #f9f9f9;
    border-color: #0d6efd; /* Highlight with blue on hover */
}

/* Icons inside the upload boxes */
.atv-upload-box .fa-music,
.atv-upload-box .fa-image {
    font-size: 32px;
    color: #7f8c8d; /* Icon color */
    margin-bottom: 15px;
    transition: color 0.3s;
}
.atv-upload-box:hover .fa-music,
.atv-upload-box:hover .fa-image {
    color: #0d6efd;
}


/* Text inside the upload boxes */
.atv-upload-box-title {
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
    margin: 0 0 5px 0;
}

.atv-upload-box-formats {
    font-size: 13px;
    color: #95a5a6;
}

/* Background Style options section */
.atv-options {
    background-color: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #eaeaea;
}

.atv-options-title {
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 12px 0;
    font-size: 16px;
}

.atv-radio-group {
    display: flex;
    gap: 25px;
}

.atv-radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    color: #34495e;
}

/* Hiding the default radio button */
.atv-radio-label input[type="radio"] {
    display: none;
}

/* Custom radio button styles - matching the blue circles */
.atv-radio-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s;
}

/* Inner dot for the selected radio button */
.atv-radio-custom::after {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #0d6efd; /* Blue for the selected state */
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}

/* Show the inner dot when the radio is checked */
.atv-radio-label input[type="radio"]:checked + .atv-radio-custom::after {
    transform: scale(1);
}

/* Highlight the border of the selected radio */
.atv-radio-label input[type="radio"]:checked + .atv-radio-custom {
    border-color: #0d6efd;
}

/* Main 'Generate Video' button - Keeping the strong yellow CTA */
.atv-generate-btn {
    width: 100%;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #212529; /* Dark text for better readability on yellow */
    background: linear-gradient(100deg, #ffdb58, #ffc107); /* Mustard to Gold Gradient */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.atv-generate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
}