/* Main container for your block */
.wp-block[data-type="tiempo/widget"] {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.wp-block[data-type="tiempo/widget"] .components-panel__body{
    padding: 0 20px;
}
.wp-block[data-type="tiempo/widget"] .components-panel__body.is-opened{
    padding: 16px;
}

.wp-block[data-type="tiempo/widget"] .block-editor-panel-color-gradient-settings{
    padding: 0;
}
.wp-block[data-type="tiempo/widget"] .block-editor-panel-color-gradient-settings__color-indicator{
    margin-left: 8px;
}
.wp-block[data-type="tiempo/widget"] .block-editor-panel-color-gradient-settings__dropdown{
    background: white;
    padding: 16px;
}
.wp-block[data-type="tiempo/widget"] .components-button{
    padding: 16px 0;
}
/* Panel titles */
.wp-block[data-type="tiempo/widget"] .components-panel__body > .components-panel__body-title,.wp-block[data-type="tiempo/widget"] .components-panel__body > .components-panel__body-title:hover {
    font-size: 16px;
    font-weight: bold;
    color: #32373c;
    background: #f9f9f9;
    margin: 0;
}

/* Text inputs */
.wp-block[data-type="tiempo/widget"] .components-text-control__input {
    border: 1px solid #7e8993;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    background: white;
}

/* Select inputs */
.wp-block[data-type="tiempo/widget"] .components-select-control__input {
    border-color: #7e8993;
    border-radius: 4px;
    padding-right: 24px; /* Adjust as needed for the dropdown arrow */
}

/* Toggles */
.wp-block[data-type="tiempo/widget"] .components-toggle-control .components-base-control__field {
    margin-bottom: 16px;
}

/* Radio buttons */
.wp-block[data-type="tiempo/widget"] .components-radio-control__option {
    margin-bottom: 8px; /* Space between radio options */
}

/* Color pickers */
.wp-block[data-type="tiempo/widget"] .components-color-picker {
    margin-top: 8px; /* Space above color picker */
}

/* For the color indicator circles */
.wp-block[data-type="tiempo/widget"] .components-circular-option-picker__option-svg {
    width: 24px; /* Circle size */
    height: 24px; /* Circle size */
}
/* Adjust the width of inputs and selects to match */
.wp-block[data-type="tiempo/widget"] .components-text-control__input,
.wp-block[data-type="tiempo/widget"] .components-select-control__input {
    width: 100%;
}

/* Style the headings of each section */
.wp-block[data-type="tiempo/widget"] .components-panel__body > .components-panel__body-title {
    font-size: 14px;
    color: #555d66;
    margin-bottom: 8px;
}

/* Adjust the toggle switches to align better */
.wp-block[data-type="tiempo/widget"] .components-toggle-control .components-base-control__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Custom styles for color pickers if needed */
.wp-block[data-type="tiempo/widget"] .components-color-picker {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* Style the radio buttons for better alignment */
.wp-block[data-type="tiempo/widget"] .components-radio-control__option {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

/* Label styles for radio buttons */
.wp-block[data-type="tiempo/widget"] .components-radio-control__label {
    margin-left: 8px;
    font-size: 14px;
}

/* Custom styles for the color indicators */
.wp-block[data-type="tiempo/widget"] .components-circular-option-picker__option-svg {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}


/* Container for each PanelBody for a cleaner look */
.wp-block[data-type="tiempo/widget"] .components-panel__body {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Input and Select control enhancements */
.wp-block[data-type="tiempo/widget"] .components-text-control__input,
.wp-block[data-type="tiempo/widget"] .components-select-control__input {
    border: 1px solid #ccd0d4;
    border-radius: 4px;

    font-size: 14px;
    line-height: 1.4;
    width: 100%; /* Full width to match panel body */
}
.wp-block[data-type="tiempo/widget"] .components-text-control__input {
    padding: 8px 12px;
}
.wp-block[data-type="tiempo/widget"] .components-select-control__input {
    padding: 0px 12px;
}
/* Toggle and Radio control enhancements */
.wp-block[data-type="tiempo/widget"] .components-toggle-control .components-base-control__field,
.wp-block[data-type="tiempo/widget"] .components-radio-control__option {
    margin-bottom: 10px;
}

/* Color Settings panel adjustments */
.wp-block[data-type="tiempo/widget"] .components-base-control__field {
    margin-bottom: 20px;
}

/* Adjustments for color picker swatches */
.wp-block[data-type="tiempo/widget"] .components-circular-option-picker__option-svg {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
    margin-right: 5px; /* Space between color swatches */
}

/* Save button styling */
.wp-block[data-type="tiempo/widget"] .components-button.is-primary {
    background: #0085ba;
    border-color: #006799;
    color: #fff;
    text-shadow: none;
    height: auto;
    padding: 8px 50px;
    font-size: 16px;
    border-radius: 4px;
}

/* Hover state for buttons */
.wp-block[data-type="tiempo/widget"] .components-button.is-primary:hover {
    background: #006799;
    border-color: #004f72;
}

.wp-block[data-type="tiempo/widget"] .components-panel__body > .components-panel__body-title {
    font-family: Arial, sans-serif; /* Replace with your desired font-family */
    font-size: 14px; /* Adjust as needed */
    font-weight: normal; /* Adjust as needed */
    color: #555; /* Adjust as needed */
}
.wp-block[data-type="tiempo/widget"] .components-select-control__input {
    overflow: visible; /* Ensure dropdown isn't clipped */
}
.wp-block[data-type="tiempo/widget"] .components-panel__body.is-collapsed > .components-panel__body-title {
    padding: 10px 0; /* Adjust top and bottom padding as needed */
}