:root {
    --q045-bg: #333333;
    --q045-text: #ffffff;
    --q045-green: #6d8e3a;
    --q045-yellow: #d9dd19;
    --q045-border: rgba(217,221,25,0.72);
    --q045-shadow: rgba(0,0,0,0.24);
    --q045-shadow-green: rgba(109,142,58,0.18);
}

/* Wrappers */
.quote-045-pro,
.entry-content .wp-block-quote,
.entry-content blockquote:not(.quote-045-pro__text),
.post-content .wp-block-quote,
.post-content blockquote:not(.quote-045-pro__text),
.page-content .wp-block-quote,
.page-content blockquote:not(.quote-045-pro__text),
article blockquote:not(.quote-045-pro__text),
.single blockquote:not(.quote-045-pro__text) {
    width: 100%;
    max-width: 980px;
    margin: 40px auto !important;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease;
}

.quote-045-pro.is-visible,
.entry-content .wp-block-quote.is-visible,
.entry-content blockquote.is-visible,
.post-content .wp-block-quote.is-visible,
.post-content blockquote.is-visible,
.page-content .wp-block-quote.is-visible,
.page-content blockquote.is-visible,
article blockquote.is-visible,
.single blockquote.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.quote-045-width-wide { max-width: 1180px; }
.quote-045-width-full { max-width: 100%; }

.quote-045-pro__inner,
.entry-content .wp-block-quote,
.entry-content blockquote:not(.quote-045-pro__text),
.post-content .wp-block-quote,
.post-content blockquote:not(.quote-045-pro__text),
.page-content .wp-block-quote,
.page-content blockquote:not(.quote-045-pro__text),
article blockquote:not(.quote-045-pro__text),
.single blockquote:not(.quote-045-pro__text) {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)),
        radial-gradient(circle at 86% 82%, rgba(109,142,58,0.20) 0 9%, transparent 10%),
        linear-gradient(135deg, rgba(109,142,58,0.10), rgba(217,221,25,0.05)),
        #333333 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-left: 0 !important;
    border-top: 4px solid var(--q045-green) !important;
    border-bottom: 2px solid var(--q045-border) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 36px var(--q045-shadow), 0 0 0 1px rgba(255,255,255,0.02) inset !important;
    text-align: center;
    padding: 60px 36px 32px !important;
}

.quote-045-pro__inner:hover,
.entry-content .wp-block-quote:hover,
.entry-content blockquote:not(.quote-045-pro__text):hover,
.post-content .wp-block-quote:hover,
.post-content blockquote:not(.quote-045-pro__text):hover,
.page-content .wp-block-quote:hover,
.page-content blockquote:not(.quote-045-pro__text):hover,
article blockquote:not(.quote-045-pro__text):hover,
.single blockquote:not(.quote-045-pro__text):hover {
    box-shadow: 0 20px 42px rgba(0,0,0,0.28), 0 0 28px var(--q045-shadow-green), 0 0 0 1px rgba(255,255,255,0.03) inset !important;
}

.quote-045-pro__topline,
.quote-045-pro__bottomline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: linear-gradient(90deg, var(--q045-green), var(--q045-yellow));
    opacity: .98;
}

.quote-045-pro__topline { top: 0; width: 136px; }
.quote-045-pro__bottomline { bottom: 0; width: 184px; }

.entry-content .wp-block-quote::after,
.entry-content blockquote:not(.quote-045-pro__text)::after,
.post-content .wp-block-quote::after,
.post-content blockquote:not(.quote-045-pro__text)::after,
.page-content .wp-block-quote::after,
.page-content blockquote:not(.quote-045-pro__text)::after,
article blockquote:not(.quote-045-pro__text)::after,
.single blockquote:not(.quote-045-pro__text)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 184px;
    height: 3px;
    background: linear-gradient(90deg, var(--q045-green), var(--q045-yellow));
    opacity: .98;
}

.quote-045-pro__icon,
.entry-content .wp-block-quote::before,
.entry-content blockquote:not(.quote-045-pro__text)::before,
.post-content .wp-block-quote::before,
.post-content blockquote:not(.quote-045-pro__text)::before,
.page-content .wp-block-quote::before,
.page-content blockquote:not(.quote-045-pro__text)::before,
article blockquote:not(.quote-045-pro__text)::before,
.single blockquote:not(.quote-045-pro__text)::before {
    content: "“";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 88px;
    line-height: 1;
    font-weight: 800;
    color: rgba(217,221,25,0.24);
    pointer-events: none;
    text-shadow: 0 0 18px rgba(109,142,58,0.12);
}

.quote-045-pro__text,
.entry-content .wp-block-quote p,
.entry-content blockquote:not(.quote-045-pro__text) p,
.post-content .wp-block-quote p,
.post-content blockquote:not(.quote-045-pro__text) p,
.page-content .wp-block-quote p,
.page-content blockquote:not(.quote-045-pro__text) p,
article blockquote:not(.quote-045-pro__text) p,
.single blockquote:not(.quote-045-pro__text) p {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 29px !important;
    line-height: 1.58 !important;
    font-weight: 700 !important;
    letter-spacing: 0.15px;
    border: 0 !important;
    padding: 0 !important;
    text-wrap: pretty;
}

.quote-045-pro__author,
.entry-content .wp-block-quote cite,
.entry-content blockquote:not(.quote-045-pro__text) cite,
.post-content .wp-block-quote cite,
.post-content blockquote:not(.quote-045-pro__text) cite,
.page-content .wp-block-quote cite,
.page-content blockquote:not(.quote-045-pro__text) cite,
article blockquote:not(.quote-045-pro__text) cite,
.single blockquote:not(.quote-045-pro__text) cite {
    display: inline-block;
    margin-top: 18px !important;
    padding-top: 12px;
    font-style: normal !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--q045-yellow) !important;
    border-top: 1px solid rgba(255,255,255,0.16);
}

/* Light variant */
.quote-045-variant-light .quote-045-pro__inner {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)),
        radial-gradient(circle at 86% 82%, rgba(109,142,58,0.15) 0 9%, transparent 10%),
        linear-gradient(135deg, rgba(109,142,58,0.08), rgba(217,221,25,0.03)),
        #f2f2f2 !important;
    color: #333333 !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03) inset !important;
}
.quote-045-variant-light .quote-045-pro__text { color: #333333 !important; }
.quote-045-variant-light .quote-045-pro__author {
    color: var(--q045-green) !important;
    border-top-color: rgba(0,0,0,0.10);
}
.quote-045-variant-light .quote-045-pro__icon { color: rgba(109,142,58,0.22); }

/* Breaking variant */
.quote-045-variant-breaking .quote-045-pro__inner {
    border-left: 6px solid var(--q045-yellow) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
        radial-gradient(circle at 86% 82%, rgba(109,142,58,0.18) 0 9%, transparent 10%),
        linear-gradient(135deg, rgba(217,221,25,0.08), rgba(109,142,58,0.08)),
        #333333 !important;
    box-shadow: 0 20px 42px rgba(0,0,0,0.28), 0 0 34px rgba(109,142,58,0.18) !important;
}

/* Left align option */
.quote-045-align-left .quote-045-pro__inner { text-align: left; }
.quote-045-align-left .quote-045-pro__icon { left: 34px; transform: none; }
.quote-045-align-left .quote-045-pro__topline,
.quote-045-align-left .quote-045-pro__bottomline { left: 34px; transform: none; }

/* Mobile */
@media (max-width: 768px) {
    .quote-045-pro,
    .entry-content .wp-block-quote,
    .entry-content blockquote:not(.quote-045-pro__text),
    .post-content .wp-block-quote,
    .post-content blockquote:not(.quote-045-pro__text),
    .page-content .wp-block-quote,
    .page-content blockquote:not(.quote-045-pro__text),
    article blockquote:not(.quote-045-pro__text),
    .single blockquote:not(.quote-045-pro__text) {
        max-width: 100%;
        margin: 26px auto !important;
    }

    .quote-045-pro__inner,
    .entry-content .wp-block-quote,
    .entry-content blockquote:not(.quote-045-pro__text),
    .post-content .wp-block-quote,
    .post-content blockquote:not(.quote-045-pro__text),
    .page-content .wp-block-quote,
    .page-content blockquote:not(.quote-045-pro__text),
    article blockquote:not(.quote-045-pro__text),
    .single blockquote:not(.quote-045-pro__text) {
        padding: 50px 20px 24px !important;
        border-radius: 0 !important;
    }

    .quote-045-pro__icon,
    .entry-content .wp-block-quote::before,
    .entry-content blockquote:not(.quote-045-pro__text)::before,
    .post-content .wp-block-quote::before,
    .post-content blockquote:not(.quote-045-pro__text)::before,
    .page-content .wp-block-quote::before,
    .page-content blockquote:not(.quote-045-pro__text)::before,
    article blockquote:not(.quote-045-pro__text)::before,
    .single blockquote:not(.quote-045-pro__text)::before {
        font-size: 66px;
        top: 8px;
    }

    .quote-045-pro__text,
    .entry-content .wp-block-quote p,
    .entry-content blockquote:not(.quote-045-pro__text) p,
    .post-content .wp-block-quote p,
    .post-content blockquote:not(.quote-045-pro__text) p,
    .page-content .wp-block-quote p,
    .page-content blockquote:not(.quote-045-pro__text) p,
    article blockquote:not(.quote-045-pro__text) p,
    .single blockquote:not(.quote-045-pro__text) p {
        font-size: 21px !important;
        line-height: 1.45 !important;
    }

    .quote-045-pro__author,
    .entry-content .wp-block-quote cite,
    .entry-content blockquote:not(.quote-045-pro__text) cite,
    .post-content .wp-block-quote cite,
    .post-content blockquote:not(.quote-045-pro__text) cite,
    .page-content .wp-block-quote cite,
    .page-content blockquote:not(.quote-045-pro__text) cite,
    article blockquote:not(.quote-045-pro__text) cite,
    .single blockquote:not(.quote-045-pro__text) cite {
        font-size: 11px !important;
        letter-spacing: 1.2px;
    }
}