/* === General Customizer Styles === */
.wp-customizer {
    font-family: Arial, sans-serif; /* Match your site's font */
    font-size: 14px;
    background-color: #1d1d1d; /* Dark background color */
    color: #333; /* Neutral, readable text color */
}

/* === Panels and Sections === */
#customize-controls {
    background-color: #1d1d1d; /* Dark background color */
    color: #ffffff; /* Text color */
    padding: 20px; /* Spacing inside the sidebar */
    border-right: 1px solid #ddd; /* Subtle border for separation */
}

.wp-full-overlay-sidebar {
    background: #1d1d1d; /* Clean, white sidebar background */
    border-right: 1px solid #ccc;
    padding: 15px;
}

/* === Section Headers === */
.accordion-section-title {
    background-color: #007bff; /* Dynamic theme color */
    color: #fff; /* White text for contrast */
    font-size: 16px;
    text-transform: uppercase; /* Bold section headers */
    padding: 10px 15px;
    transition: background-color 0.3s ease;
}

.accordion-section-title:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* === Individual Controls === */
.customize-control {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #2e2e2e; /* Background color for each control */
    border: 1px solid #e3e3e3; /* Subtle border for definition */
    border-radius: 4px;
    transition: all 0.2s ease;
}

.customize-control:hover {
    background-color: #404040; /* Slightly darker hover effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add depth */
}

/* === Input Fields === */
.customize-control input[type="text"],
.customize-control input[type="number"],
.customize-control select,
.customize-control textarea {
    width: 100%; /* Full-width inputs */
    padding: 8px;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.customize-control input:focus,
.customize-control select:focus,
.customize-control textarea:focus {
    border-color: #007bff; /* Highlighted border */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Glow effect */
}

/* === Buttons === */
.wp-core-ui .button {
    background-color: #1d1d1d; /* Primary theme button */
    border-color: #0056b3;
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.wp-core-ui .button:hover {
    background-color: #0056b3; /* Darker hover state */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.wp-core-ui .button-secondary {
    background-color: #6c757d; /* Secondary gray button */
    color: #fff;
}

.wp-core-ui .button-secondary:hover {
    background-color: #5a6268; /* Darker gray */
}

/* === Publish Button === */
.wp-full-overlay-footer .button-primary {
    background-color: #28a745; /* Green publish button */
    border-color: #218838;
    color: #fff;
}

.wp-full-overlay-footer .button-primary:hover {
    background-color: #218838; /* Darker green */
}

/* === Active Controls === */
.customize-control-active {
    background-color: #e8f0fe; /* Subtle blue for active control */
    border-color: #007bff;
}

.customize-control-active:hover {
    background-color: #d1e7fd; /* Slightly darker hover effect */
}

/* === Notifications === */
.customize-control-notifications-container {
    padding: 10px;
    margin-bottom: 15px;
    background-color: #fff3cd; /* Warning background (yellow) */
    border: 1px solid #ffeeba; /* Warning border */
    color: #856404; /* Warning text */
    border-radius: 4px;
}

.customize-control-notifications-container .notice-dismiss:hover {
    color: #856404;
}

/* === Scrollbars === */
#customize-controls::-webkit-scrollbar {
    width: 10px;
}

#customize-controls::-webkit-scrollbar-thumb {
    background-color: #007bff; /* Blue scrollbar */
    border-radius: 5px;
}



/* Customizer Sidebar Menu Styles */
#customize-controls {
    background-color: #1d1d1d; /* Dark background color */
    color: #ffffff; /* Text color */
    padding: 20px; /* Spacing inside the sidebar */
}

#customize-controls .customize-section-title {
    font-size: 18px; /* Increase section title size */
    color: #404040; /* Section title color */
    font-weight: bold; /* Make titles stand out */
    border-bottom: 2px solid #00aeff; /* Add an underline for emphasis */
    padding-bottom: 8px; /* Adjust spacing */
}

#customize-controls .customize-control {
    margin-bottom: 15px; /* Space between each control */
    background-color: #2e2e2e; /* Background color for each control */
    color: #ffffff; /* Control text color */
    padding: 10px; /* Inner padding */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Subtle shadow effect */
}

#customize-controls .customize-control:hover {
    background-color: #404040; /* Change control background color on hover */
    color: #00aeff; /* Text color on hover */
}

/* Adjust Descriptions and Subtext */
#customize-controls .customize-control-description {
    font-size: 14px; /* Smaller text for descriptions */
    color: #404040; /* Light grey for subtext */
}

/* Scrollable Sidebar for Overflow */
#customize-controls {
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 100vh; /* Prevent overflow beyond viewport height */
}


#customize-controls .description customize-section-description {
    color: #ffffff; /* Text color on hover */
}