/* Custom styles for Bulk Product Updater Enhanced UI settings page */
/* Sky Blue Radio Button Style for Section 1 */
.radio-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hide default radio buttons */
.radio-input {
    display: none;
}

/* Sky blue button-like style for radio labels */
.sky-blue-label {
    padding: 10px 20px;
    border: 2px solid #a3daff;
    border-radius: 30px;
    background-color: transparent;
    color: #007acc;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(163, 218, 255, 0.2);
}

/* Hover effect for sky blue labels */
.sky-blue-label:hover {
    background-color: rgba(163, 218, 255, 0.1);
    border-color: #66b3ff;
}

/* Checked (selected) state for sky blue radio buttons */
.radio-input:checked + .sky-blue-label {
    background: linear-gradient(135deg, #66b3ff, #0099ff); /* Gradient from light sky blue to deeper blue */
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 12px rgba(102, 179, 255, 0.4);
    transform: scale(1.05); /* Slight enlargement for the selected button */
}

/* Smooth transition effect */
.sky-blue-label:hover, .radio-input:checked + .sky-blue-label {
    transition: all 0.3s ease;
}

.wrap h1 {
    @apply text-3xl font-extrabold text-gray-900 mb-6;
}
/* Global Heading Styling */
.wrap h1, .wrap h2, .wrap h3 {
    font-family: Arial, sans-serif;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.4;
}
/* Styling for the Upload Heading */
.upload-heading {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ff6a5f; /* Matches the Choose File button */
    margin-bottom: 10px;
}
.wrap h1 {
    font-size: 2.5rem;
    color: #2b3a67; /* Darker blue for main heading */
}

.wrap h2 {
    font-size: 1.75rem;
    color: #ff6347; /* Soft red for section headers */
}

/* Container Styling */
.wrap .section-container {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 24px;
    margin-bottom: 24px;
}

/* File Input Button Styling */
.file-input-wrapper {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    border: 2px solid #ff477e; /* Gradient border */
    background: linear-gradient(135deg, #ff477e, #ff6a5f); /* Gradient background */
    color: white;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 71, 126, 0.3); /* Soft shadow */
}

.file-input-wrapper:hover {
    background: linear-gradient(135deg, #ff6a5f, #ff477e); /* Inverted gradient on hover */
    color: white;
}

/* Hidden file input for styling */
.file-input-wrapper input[type="file"] {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

/* Submit Button Styling */
.submit-button {
    background: linear-gradient(135deg, #6a5eff, #5f91ff);
    color: white;
    padding: 12px 24px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(106, 94, 255, 0.3); /* Blue shadow */
    border: none;
}

.submit-button:hover {
    background: linear-gradient(135deg, #5f91ff, #6a5eff);
    box-shadow: 0 6px 12px rgba(106, 94, 255, 0.5); /* Larger shadow on hover */
}

/* Label for Radio Buttons */
.radio-container .radio-label {
    font-size: 1rem;
    padding: 8px 16px;
    border-radius: 25px;
    font-weight: bold;
    transition: background 0.3s, box-shadow 0.3s;
}

/* Consistent Padding and Margin */
.section-padding {
    padding: 20px 30px;
}

.wrap .bg-white {
    @apply bg-white shadow overflow-hidden sm:rounded-lg p-6;
}
/* Container for radio options */
.radio-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hide default radio buttons */
.radio-input {
    display: none;
}

/* Style the labels as buttons */
.radio-label {
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 30px;
    background-color: transparent;
    color: #333;
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hover effect for labels */
.radio-label:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: #aaa;
}

/* Style for the selected (checked) radio button */
.radio-input:checked + .radio-label {
    background: linear-gradient(135deg, #4CAF50, #2196F3); /* Gradient from green to blue */
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    transform: scale(1.05); /* Slightly larger for selected option */
}

/* Smooth transition effect */
.radio-label:hover, .radio-input:checked + .radio-label {
    transition: all 0.3s ease;
}

.wrap .grid-cols-2 {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-4;
}

.wrap .space-y-6 > * + * {
    @apply mt-6;
}

.wrap .space-y-4 > * + * {
    @apply mt-4;
}

.wrap .text-right {
    @apply text-right;
}

.wrap .text-sm {
    @apply text-sm;
}

.wrap .font-medium {
    @apply font-medium;
}

.wrap .mt-6 {
    @apply mt-6;
}

.wrap .mb-6 {
    @apply mb-6;
}

.wrap .bg-yellow-50 {
    @apply bg-yellow-50;
}

.wrap .bg-red-50 {
    @apply bg-red-50;
}

.wrap .bg-indigo-600 {
    @apply bg-indigo-600;
}

.wrap .hover\:bg-indigo-700:hover {
    @apply hover:bg-indigo-700;
}

.wrap .text-indigo-600 {
    @apply text-indigo-600;
}

.wrap .hover\:text-indigo-500:hover {
    @apply hover:text-indigo-500;
}

.wrap .border-l-4 {
    @apply border-l-4;
}

.wrap .border-yellow-400 {
    @apply border-yellow-400;
}

.wrap .border-red-400 {
    @apply border-red-400;
}

.wrap .border-green-400 {
    @apply border-green-400;
}

.wrap .bg-green-50 {
    @apply bg-green-50;
}

.wrap .text-green-700 {
    @apply text-green-700;
}

.wrap .flex {
    @apply flex;
}

.wrap .flex-shrink-0 {
    @apply flex-shrink-0;
}

.wrap .ml-3 {
    @apply ml-3;
}
/* Fiery Red Radio Button Styles */

/* Container for fiery red radio options */
.fire-radio-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Hide default radio buttons */
.radio-input {
    display: none;
}

/* Style the labels as fiery buttons */
.fire-radio-label {
    padding: 12px 24px;
    border: 2px solid #d9534f; /* Dark red border */
    border-radius: 30px;
    background-color: transparent;
    color: #d9534f; /* Dark red text */
    cursor: pointer;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(217, 83, 79, 0.2); /* Light red shadow */
}

/* Hover effect for fiery labels */
.fire-radio-label:hover {
    background-color: rgba(217, 83, 79, 0.1); /* Light red background */
    border-color: #c9302c; /* Slightly darker red */
}

/* Style for the selected (checked) fiery radio button */
.radio-input:checked + .fire-radio-label {
    background: linear-gradient(135deg, #ff5733, #d9534f); /* Fiery gradient from orange to dark red */
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 12px rgba(217, 83, 79, 0.4); /* Deeper shadow for selected option */
    transform: scale(1.05); /* Slightly larger for selected option */
}

/* Smooth transition effect */
.fire-radio-label:hover, .radio-input:checked + .fire-radio-label {
    transition: all 0.3s ease;
}
/* Completely hide default radio buttons */
.radio-input {
    appearance: none !important; /* Hide browser-specific styles */
    display: none !important;
}
/* Custom styles for Image Alt Text Optimizer settings page */
.wrap h1 {
    @apply text-3xl font-extrabold text-gray-900 mb-6;
}

.wrap .bg-white {
    @apply bg-white shadow overflow-hidden sm:rounded-lg p-6;
}

.wrap .grid-cols-2 {
    @apply grid grid-cols-1 sm:grid-cols-2 gap-4;
}

.wrap .space-y-6 > * + * {
    @apply mt-6;
}

.wrap .space-y-4 > * + * {
    @apply mt-4;
}

.wrap .text-right {
    @apply text-right;
}

.wrap .text-sm {
    @apply text-sm;
}

.wrap .font-medium {
    @apply font-medium;
}

.wrap .mt-6 {
    @apply mt-6;
}

.wrap .mb-6 {
    @apply mb-6;
}

.wrap .bg-yellow-50 {
    @apply bg-yellow-50;
}

.wrap .bg-red-50 {
    @apply bg-red-50;
}

.wrap .bg-indigo-600 {
    @apply bg-indigo-600;
}

.wrap .hover\:bg-indigo-700:hover {
    @apply hover:bg-indigo-700;
}

.wrap .text-indigo-600 {
    @apply text-indigo-600;
}

.wrap .hover\:text-indigo-500:hover {
    @apply hover:text-indigo-500;
}

.wrap .border-l-4 {
    @apply border-l-4;
}

.wrap .border-yellow-400 {
    @apply border-yellow-400;
}

.wrap .border-red-400 {
    @apply border-red-400;
}