.wp-block-tonyteo-events {
    padding: 20px;
}

.wp-block-tonyteo-events .image-button {
    width: 100%;
    height: 200px;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.wp-block-tonyteo-events .image-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wp-block-tonyteo-events .image-button .placeholder {
    color: #757575;
    font-size: 16px;
}

.wp-block-tonyteo-events .date {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.wp-block-tonyteo-events .title-url-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.wp-block-tonyteo-events .title-url-group h3 {
    margin: 0;
    flex-grow: 1;
}

.wp-block-tonyteo-events ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.wp-block-tonyteo-events ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wp-block-tonyteo-events .components-select-control {
    min-width: 120px;
}

.wp-block-tonyteo-events .button-group {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #007cba;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    margin-top: 15px;
    cursor: pointer;
}

.wp-block-tonyteo-events .button-text {
    flex-grow: 1;
}

/* Make sure popover appears above other elements */
.components-popover.components-datetime__date {
    z-index: 1000000;
}

/* Style the date picker */
.components-datetime__date .components-datetime__date-help-button {
    display: none;
}

/* Editor-specific styles that don't conflict with template.css */
.block-editor-block-list__block .wp-block-tonyteo-events {
    position: relative;
}

/* Editor-specific styles for the events block that don't conflict with template.css */
.block-editor-block-list__block[data-type="tonyteo/events"] {
    padding: 20px;
}

/* Error state styling */
.block-editor-block-list__block .block-error {
    padding: 20px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
}

.block-editor-block-list__block .block-error h3 {
    margin-top: 0;
    color: #721c24;
}

.block-editor-block-list__block .block-error button {
    margin-top: 15px;
}

/* For the new media-upload-button */
.block-editor-block-list__block .media-upload-button {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgba(0, 0, 0, 0) !important; /* Transparent background */
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
}

/* Different styles for containers with and without images */
.block-editor-block-list__block .image-container {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    cursor: pointer !important;
}

/* Only show overlay for containers with images */
.block-editor-block-list__block .image-container.has-image::after {
    content: 'CLICK HERE TO CHANGE IMAGE' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(0, 124, 186, 0.9) !important; /* WordPress blue */
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 10px !important;
    z-index: 50 !important;
    text-align: center !important;
}

/* Don't show overlay for empty containers */
.block-editor-block-list__block .image-container.no-image::after {
    content: none !important;
}

.block-editor-block-list__block .image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Update image upload button to be invisible but clickable if needed */
.block-editor-block-list__block .image-upload-button {
    display: none !important;
}

/* Make sure date display doesn't interfere with clicks */
.block-editor-block-list__block figure .date {
    pointer-events: none !important;
    z-index: 10 !important; /* Lower z-index than the overlay */
}

/* Remove old styles that are no longer needed */
.block-editor-block-list__block .image-container-button,
.block-editor-block-list__block .edit-overlay,
.block-editor-block-list__block .edit-button,
.block-editor-block-list__block .select-image-button,
.block-editor-block-list__block .image-display {
    display: none !important;
}

/* Event clickable styling */
.block-editor-block-list__block .active-event .blog-box {
    outline: 2px solid #007cba !important;
    position: relative;
    z-index: 1;
}

.block-editor-block-list__block .active-event .blog-box:after {
    content: "Editing";
    position: absolute;
    top: -12px;
    right: 10px;
    background: #007cba;
    color: #fff;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 3px;
    z-index: 10;
}

.block-editor-block-list__block .col-xs-12.col-sm-12.col-md-6.col-lg-6 {
    cursor: pointer;
}

.block-editor-block-list__block .col-xs-12.col-sm-12.col-md-6.col-lg-6:hover .blog-box {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Add button styling */
.block-editor-block-list__block .add-event-container {
    margin: 30px 0;
}

.block-editor-block-list__block .add-event-container .theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #0073aa !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background 0.3s !important;
}

.block-editor-block-list__block .add-event-container .theme-btn:hover {
    background: #005a87 !important;
}

/* Make sure the date display has good contrast and doesn't interfere with clicks */
.block-editor-block-list__block .blog-box .date {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    z-index: 40 !important; /* Lower than image-container-button but higher than most elements */
    pointer-events: none !important; /* Prevent interfering with clicks */
}

/* Fix the button display */
.block-editor-block-list__block .blog-box .theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

/* Sidebar controls styling */
.components-panel__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
}

.components-panel__row > label {
    margin-bottom: 8px;
    width: 100%;
}

.components-panel__row .components-text-control__input,
.components-panel__row .components-select-control__input {
    width: 100% !important;
}

.components-panel__row .components-text-control__help {
    margin-top: 5px;
    font-style: italic;
    font-size: 12px;
}

.components-button.is-destructive {
    margin-top: 16px;
}

/* Override any template.css styles that might conflict */
.block-editor-block-list__block .site-blog h1,
.block-editor-block-list__block .site-blog h2 {
    cursor: text !important;
}

.block-editor-block-list__block .blog-box ul li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.block-editor-block-list__block .blog-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
}

.block-editor-block-list__block .blog-box h3 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* Fix spacing in the editor */
.block-editor-block-list__block .blog-box {
    margin-bottom: 30px !important;
}

.block-editor-block-list__block .blog-box figure {
    position: relative !important;
    margin: 0 !important;
}

/* Make sure blog-box doesn't interfere with button clicks */
.block-editor-block-list__block .blog-box {
    position: relative !important;
}

.block-editor-block-list__block .blog-box * {
    pointer-events: auto !important;
}

/* Update placeholder to match dimensions */
.block-editor-block-list__block .image-container .placeholder {
    width: 100% !important;
    height: 200px !important; /* Match container height */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    background-color: #f0f0f0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.block-editor-block-list__block .image-container .placeholder::before {
    content: "\f093" !important; /* Font Awesome upload icon */
    font-family: FontAwesome !important;
    font-size: 32px !important;
    margin-bottom: 10px !important;
    color: #007cba !important;
}

/* Direct targeting of the rendered output structure */
.block-editor-block-list__block .blog-box .image-container {
    position: relative !important;
    cursor: pointer !important;
}

.block-editor-block-list__block .blog-box .image-container::after {
    content: "CLICK TO CHANGE IMAGE" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 124, 186, 0.9) !important;
    color: white !important;
    text-align: center !important;
    padding: 8px !important;
    font-weight: bold !important;
    z-index: 999999 !important;
}

/* Make sure the date doesn't block the overlay */
.block-editor-block-list__block .blog-box .date {
    z-index: 50 !important;
    bottom: 40px !important; /* Move up to avoid overlap with our button */
}

/* For direct targeting in editor and frontend */
.site-blog .blog-box .image-container {
    position: relative !important;
    cursor: pointer !important;
}

/* Update the change-image-button to match original theme */
.block-editor-block-list__block .change-image-button {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: #007cba !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Remove any conflicting styles */
.block-editor-block-list__block .image-container::after,
.block-editor-block-list__block .image-container.has-image::after,
.block-editor-block-list__block .image-container.no-image::after {
    display: none !important;
}

/* Override template.css styles for image sizing */
.site-blog .blog-box figure {
    float: left !important;
    width: 100% !important;
    text-align: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-blog .blog-box figure .image-container {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.site-blog .blog-box figure .image-container img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Update the change-image-button to match original theme */
.site-blog .blog-box figure .change-image-button {
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: #007cba !important;
    color: white !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* Make sure the date display is positioned correctly */
.site-blog .blog-box figure .date {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    background: rgba(0, 0, 0, 0.7) !important;
    color: white !important;
    padding: 5px 10px !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    z-index: 40 !important;
    pointer-events: none !important;
}