/* General Styles */
.custom-button {
    background: #cd3c0d !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
}

.custom-button:hover {
    background: #a82c05 !important;
    transform: translateY(-2px) !important;
}

.custom-button-back {
    background: #BA1B23 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: background 0.3s ease, transform 0.2s ease !important;
}

.custom-button-back:hover {
    background: #750E13 !important;
    transform: translateY(-2px) !important;
}

.disabled-button {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.step {
    padding: 25px !important;
    margin-bottom: 20px !important;
    border: 2px dashed #002c6c !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    transition: background 0.3s ease !important;
}

.step:hover {
    background: #E5F0FC !important;
}

@keyframes progress-animation {
    from {
        width: 0% !important;
    }
    to {
        width: 100% !important;
    }
}

.step h4 {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
    color: #002c6c !important;
}

.step p {
    font-size: 1rem !important;
    color: #262626 !important;
}

.btn-close {
    background: transparent !important; /* Make the background transparent */
    border: none !important; /* Remove the border */
    color: #fff !important; /* Set the icon color to white (or any color that fits your theme) */
    font-size: 1.5rem !important; /* Adjust size as needed */
    cursor: pointer !important; /* Change cursor to pointer on hover */
    transition: color 0.3s ease !important; /* Smooth transition for color change */
}

.btn-close:hover {
    color: #ffcccc !important; /* Change color on hover for better visibility */
}

/* Success Message */
#success-message {
    display: none !important;
    background: #CCF1DC !important;
    color: #262626 !important;
    padding: 15px 20px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    margin-top: 20px !important;
    animation: fadeIn 0.8s ease-in-out !important;
    border-left: 4px solid #026b30 !important; /* Thicker left border */
}

.error-message {
    color: #262626 !important;
    padding: 15px 20px !important;
    background: #FFDFDF !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    margin-top: 20px !important;
    animation: fadeIn 0.8s ease-in-out !important;
    border-left: 4px solid #BA1B23 !important; /* Thicker left border */
}

@keyframes fadeIn {
    from {
        opacity: 0 !important;
        transform: translateY(10px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* Download Button */
#download-id-card {
    width: 100% !important;
    margin-top: 20px !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .gs1-barcode-generator {
        padding: 15px !important;
    }

    .step {
        padding: 20px !important;
    }

    .custom-button, .custom-button-back {
        width: 100% !important;
    }
}

/* CSS of the Script */
/* Barcode Grid Styles */
.barcode-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; /* Responsive grid */
    gap: 20px !important; /* Space between containers */
    margin: 20px 0 !important; /* Margin for spacing */
}

/* Barcode Container Styles */
.barcode-container {
    background: #fff !important; /* Light background */
    border-radius: 4px !important; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    overflow: hidden !important; /* Ensures content doesn't overflow rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; /* Hover effects */
}

.barcode-container:hover {
    transform: translateY(-5px) !important; /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; /* Enhanced shadow on hover */
}

/* Barcode Header Styles */
.barcode-header {
    background: #CD3C0D !important; /* Header background color */
    color: #fff !important; /* Header text color */
    padding: 10px 20px !important; /* Padding for header */
    text-align: center !important; /* Centered text */
}

.barcode-header h3 {
    margin: 0 !important; /* Remove default margin */
    font-size: 1.2rem !important; /* Adjust heading size */
    color: #fff !important;
}

/* Barcode Body Styles */
.barcode-body {
    padding: 20px !important; /* Padding within the body */
    text-align: center !important; /* Centered text */
}

/* Barcode Image Styles */
.barcode-image {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important; /* Rounded corners for the image */
}

/* Barcode Footer Styles */
.barcode-footer {
    padding: 10px 20px !important; /* Padding for footer */
    background: #E5F0FC !important; /* Footer background color */
    text-align: center !important; /* Centered text */
}

/* Download Link Styles */
.download-link {
    display: inline-block !important;
    text-decoration: none !important;
    color: #00799E !important; /* Blue link color */
    font-weight: 500 !important; /* Bold text */
    font-size: 0.8rem !important; /* Adjust font size */
    padding: 8px 12px !important; /* Padding for button effect */
    border-radius: 5px !important; /* Rounded corners for button */
    background: #fff !important; /* Light background */
    transition: background 0.3s ease, transform 0.3s ease !important; /* Smooth transition */
}

.download-link:hover {
    background: #E5F0FC !important; /* Change background on hover */
    transform: translateY(-2px) !important; /* Slight lift on hover */
}

.badge-outside {
    padding: 5px 10px !important;
    background-color: #BA1B23 !important;
    color: #fff !important;
    font-size: 14px !important; 
}

.badge-title {
    font-weight: bold !important; /* Bold title */
    margin-right: 5px !important; /* Space between title and text */
}

.badge-text {
    font-weight: normal !important; /* Normal text */
}

.icon-style {
    color: #002c6c !important; /* Modern blue color */
    font-size: 1.2em !important; /* Slightly larger icons */
    transition: color 0.3s ease !important; /* Smooth color transition */
}

.icon-style:hover {
    color: #0056b3 !important; /* Darker blue on hover */
}

/* Global styles for all labels */
label {
    font-size: 14px; /* Adjust font size */
    color: #002c6c; /* Dark blue color for the label text */
    font-weight: 500; /* Medium font weight */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover/focus effects */
    padding-left: 5px; /* Add some padding to align with the input */
}

/* Hover effect on labels */
label:hover {
    color: #0056b3; /* Lighter blue on hover */
}

/* Focus effect on labels (when the associated input is focused) */
.form-floating input:focus ~ label {
    color: #0056b3; /* Lighter blue when the input is focused */
    transform: translateY(-10px) scale(0.9); /* Move and scale the label up */
}

/* Adjust label position when the input has content */
.form-floating input:not(:placeholder-shown) ~ label {
    transform: translateY(-10px) scale(0.9); /* Move and scale the label up */
    color: #002c6c; /* Keep the dark blue color */
}

/* Example GTIN link */
#gtin-example {
    color: #008DBD !important; /* Dark blue color */
    font-weight: 600 !important; /* Semi-bold text */
    cursor: pointer !important; /* Pointer cursor */
    text-decoration: none !important; /* No underline by default */
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out !important; /* Smooth transition */
}

/* Hover effect on GTIN example link */
#gtin-example:hover {
    color: #0056b3 !important; /* Lighter blue on hover */
    text-decoration: underline !important; /* Underline on hover */
}

/* Modern Toggle Link Styling */
.modern-toggle-link {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between text and icon */
    color: #008DBD; /* Dark blue color */
    font-weight: 600; /* Semi-bold text */
    text-decoration: none; /* No underline by default */
    padding: 8px 12px; /* Padding for better click area */
    border-radius: 6px; /* Rounded corners */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    cursor: pointer; /* Pointer cursor */
}

/* Hover Effect */
.modern-toggle-link:hover {
    color: #008DBD; /* Lighter blue on hover */
    text-decoration: none; /* No underline */
}

/* Icon Styling */
.toggle-icon {
    font-size: 14px; /* Icon size */
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}

/* Optional Fields Container */
#optionalFields {
    margin-top: 15px; /* Add space between link and optional fields */
    padding: 15px; /* Padding for better spacing */
    border-radius: 8px; /* Rounded corners */
    background-color: #F0F5FA; /* Light background */
    border: 1px solid #e9ecef; /* Subtle border */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth fade-in */
}

/* Hidden State */
#optionalFields.d-none {
    opacity: 0; /* Fade out */
    transform: translateY(-10px); /* Slight upward movement */
    pointer-events: none; /* Disable interaction when hidden */
}

/* Visible State */
#optionalFields:not(.d-none) {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Reset position */
}

#disclaimer-message {
    background-color: #FFE6CC;
    color: #002c6c;
    border: 1px solid #ffeeba;
    border-left: 4px solid #FF8200; /* Added left border */
    padding: 10px 15px;
    font-weight: 500;
}