/* SkylarkAds Banner Visual Meta Box CSS
 * Styles for banner preview and visual meta box
 * Replaces wp_add_inline_style for better WordPress compliance
 */

/* Banner Preview Flex Layout */
#skylarkads main.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: normal;
    gap: 10px;
}

#skylarkads main.flex section.flex-element {
    width: 45%;
    min-width: 250px;
    background-color: var(--bone);
    padding: 5px 10px;
    border: 1px solid var(--flame);
    position: relative;
}

@media screen and (max-width: 1128px) {
    #skylarkads main.flex section.flex-element {
        width: 100%;
        min-width: auto;
    }
}

#skylarkads main.flex section.flex-element:nth-child(even) {
    background-color: var(--bone-bleached);
}

/* Banner Preview Containers */
.skylarkads-banner-preview__flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: normal;
    gap: 10px;
}

.skylarkads-banner-preview__flex-element {
    width: 45%;
    min-width: 250px;
    background-color: var(--bone);
    padding: 5px 10px;
    border: 1px solid var(--flame);
    position: relative;
}

.skylarkads-banner-preview__flex-element--even {
    background-color: var(--bone-bleached);
}

@media screen and (max-width: 1128px) {
    .skylarkads-banner-preview__flex-element {
        width: 100%;
        min-width: auto;
    }
}

/* Banner Preview Specific Styles */
.skylarkads-banner-preview__container {
    position: relative;
}

.skylarkads-banner-preview__desktop,
.skylarkads-banner-preview__mobile {
    margin-bottom: 20px;
}

.skylarkads-banner-preview__size-error {
    color: red;
    display: block;
    margin-top: 5px;
}

/* Banner Preview Container Styles */
#skylarkads section.banner-preview-container {
    margin-top: 40px;
    background-color: var(--bone);
    padding: 5px 10px;
    border: 1px solid var(--flame);
}

#skylarkads div.banner-preview-container_wrapper {
    background: rgb(234 237 234 / 67%);
    background-image: radial-gradient(var(--black-olive) 1px, transparent 0);
    background-size: 40px 40px;
    background-position: -19px -19px;
    border: 1px solid var(--flame);
    padding: 20px 20px;
    margin-bottom: 20px;
}

#skylarkads section.banner-preview-container h3,
#skylarkads section.banner-preview-container h4 {
    background: var(--bone-bleached);
    margin: 0;
}

#skylarkads section.banner-preview-container h4 {
    color: #43bdb5;
    backdrop-filter: blur(5px);
    text-decoration: underline;
    border: 3px double var(--flame);
    width: 67px;
    padding: 5px 10px;
    margin-top: -30px;
}