/*
 * WebDesignBy Notices Frontend Styles
 *
 * Theme override support:
 * Copy this file to your active theme as:
 * /wp-content/themes/your-theme/webdesignby-notices.css
 */

.webdesignby-notice {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 600;
}

.webdesignby-notice__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px;
    position: relative;
}

.webdesignby-notice--cancelable .webdesignby-notice__inner {
    padding-right: 44px;
}

.webdesignby-notice p {
    margin: 0;
}

.webdesignby-notice a {
    text-decoration: underline;
}

.webdesignby-notice__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
}

.webdesignby-notice__close:hover,
.webdesignby-notice__close:focus-visible {
    opacity: 1;
}

.webdesignby-notice__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Mobile-first content switching when mobile content exists. */
.webdesignby-notice--has-mobile-content .webdesignby-notice__content-mobile {
    display: block;
}

.webdesignby-notice--has-mobile-content .webdesignby-notice__content-desktop {
    display: none;
}

/* Position helpers */
.webdesignby-notice--top {
    position: relative;
    z-index: 1000;
}

.webdesignby-notice--bottom {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 0;
}

.webdesignby-notice--modal {
    position: fixed;
    z-index: 1000;
    left: 16px;
    right: 16px;
    top: 16px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Category styles (contrast-forward choices) */
.webdesignby-notice--category-critical {
    background: #b00020;
    color: #ffffff;
}

.webdesignby-notice--category-critical a {
    color: #ffffff;
}

.webdesignby-notice--category-dark {
    background: #111111;
    color: #d9d9d9;
}

.webdesignby-notice--category-dark a {
    color: #ffffff;
}

.webdesignby-notice--category-default {
    background: #d9d9d9;
    color: #111111;
}

.webdesignby-notice--category-default a {
    color: #111111;
}

.webdesignby-notice--category-info {
    background: #1e5aa8;
    color: #ffffff;
}

.webdesignby-notice--category-info a {
    color: #ffffff;
}

.webdesignby-notice--category-light {
    background: #f2f2f2;
    color: #111111;
}

.webdesignby-notice--category-light a {
    color: #111111;
}

.webdesignby-notice--category-primary {
    background: #0b66c3;
    color: #ffffff;
}

.webdesignby-notice--category-primary a {
    color: #ffffff;
}

.webdesignby-notice--category-success {
    background: #1f7a1f;
    color: #ffffff;
}

.webdesignby-notice--category-success a {
    color: #ffffff;
}

.webdesignby-notice--category-warning {
    background: #f5c400;
    color: #111111;
}

.webdesignby-notice--category-warning a {
    color: #111111;
}

.webdesignby-notice--category-gold{
    background: #ff9b00;
    color: #111111;
}

.webdesignby-notice--category-gold a {
    color: #111111;
}

/* Fallback if no category is assigned. */
.webdesignby-notice--category-none {
    background: #d9d9d9;
    color: #111111;
}

.webdesignby-notice--category-none a {
    color: #111111;
}

@media (max-width: 782px) {
    .webdesignby-notice {
        font-size: 15px;
    }

    .webdesignby-notice__inner {
        padding: 12px 14px;
    }
}

@media (min-width: 768px) {
    .webdesignby-notice--has-mobile-content .webdesignby-notice__content-mobile {
        display: none;
    }

    .webdesignby-notice--has-mobile-content .webdesignby-notice__content-desktop {
        display: block;
    }
}