/* =====================================================================
   AmourCo Banner — Frontend v2.0.0
===================================================================== */

.amourco-banner *, .amourco-banner *::before, .amourco-banner *::after { box-sizing: border-box; }

.amourco-banner {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--ab-gap, 16px);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    transition: opacity .4s ease;
}

.amourco-banner.ab-dismissed { display: none !important; }

.amourco-banner.ab-sticky-top    { position: sticky; top: 0; left: 0; right: 0; }
.amourco-banner.ab-sticky-bottom { position: sticky; bottom: 0; left: 0; right: 0; }

/* Side image */
.amourco-banner__side-image {
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-self: stretch;
}

.amourco-banner__side-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-position: center;
}

.amourco-banner__side-image.ab-img-right { order: 10; }

/* Background image */
.amourco-banner__bg-image {
    position: absolute; inset: 0;
    background-repeat: no-repeat; background-position: center;
    pointer-events: none; z-index: 0;
}

/* Icon aside */
.amourco-banner__icon-aside {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 1;
}
.amourco-banner__icon-aside.ab-icon-right { order: 9; }

/* Content */
.amourco-banner__content {
    flex: 1; min-width: 0;
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    gap: clamp(5px, 0.8vw, 10px);
}

/* Title */
.amourco-banner__title {
    margin: 0;
    line-height: 1.2;
    word-break: break-word;
}

/* Sub text */
.amourco-banner__subtext {
    margin: 0;
    line-height: 1.55;
    opacity: 0.88;
    max-width: 65ch;
}

.amourco-banner__subtext p { margin: 0 0 4px; }
.amourco-banner__subtext p:last-child { margin-bottom: 0; }

/* Icon */
.amourco-banner__icon { display: inline-block; vertical-align: middle; line-height: 1; }
.dashicons.amourco-banner__icon { margin-top: -2px; }

/* Button */
.amourco-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, opacity .2s, transform .15s, box-shadow .2s;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
    align-self: flex-start;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}

.amourco-banner__btn:hover {
    opacity: .88;
    transform: translateY(-1px);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.amourco-banner__btn:active { transform: translateY(0); box-shadow: none; }
.amourco-banner__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.amourco-banner__btn .dashicons { font-size: 16px; width: 16px; height: 16px; margin-top: -1px; }

.ab-btn--outlined { background: transparent !important; }
.ab-btn--ghost    { background: transparent !important; border-color: transparent !important; padding-left: 0; padding-right: 0; }
.ab-btn--ghost:hover { background: rgba(0,0,0,.05) !important; padding-left: 8px; padding-right: 8px; }
.ab-btn--pill     { border-radius: 100px !important; }
.ab-btn--text     { background: none !important; border: none !important; padding: 0 !important; text-decoration: underline; font-weight: 500; box-shadow: none; }
.ab-btn--text:hover { opacity: .65; transform: none; box-shadow: none; }

/* Dismiss */
.amourco-banner__dismiss {
    position: absolute;
    top: 8px; right: 8px;
    background: none; border: none;
    cursor: pointer;
    opacity: .4;
    font-size: 20px;
    line-height: 1;
    padding: 4px 7px;
    transition: opacity .15s, background .15s;
    z-index: 10;
    color: inherit;
    border-radius: 50%;
    -webkit-appearance: none; appearance: none;
    font-family: inherit;
}
.amourco-banner__dismiss:hover { opacity: 1; background: rgba(0,0,0,.08); }

/* =====================================================================
   RESPONSIVE BASE
===================================================================== */

@media (max-width: 767px) {
    .ab-hide-mobile { display: none !important; }

    .amourco-banner {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .amourco-banner__side-image {
        width: 100% !important;
        max-height: 200px;
        order: -1;
    }

    .amourco-banner__side-image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .amourco-banner__side-image.ab-img-right { order: -1; }
    .amourco-banner__content { width: 100%; }
    .amourco-banner__subtext { max-width: 100%; }
    .amourco-banner__icon-aside { width: 100%; justify-content: flex-start; }
    .amourco-banner__btn { max-width: 100%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .ab-hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
    .ab-hide-desktop { display: none !important; }
}

/* =====================================================================
   ANIMATIONS
===================================================================== */

.ab-cursor {
    display: inline-block;
    animation: ab-blink .65s step-end infinite;
    font-weight: 300;
    margin-left: 1px;
}

@keyframes ab-blink { 0%,100%{opacity:1} 50%{opacity:0} }

@keyframes ab-fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes ab-slideInLeft { from{opacity:0; transform:translateX(-50px)} to{opacity:1; transform:translateX(0)} }
@keyframes ab-slideInRight{ from{opacity:0; transform:translateX(50px)}  to{opacity:1; transform:translateX(0)} }
@keyframes ab-slideUp     { from{opacity:0; transform:translateY(28px)}  to{opacity:1; transform:translateY(0)} }
@keyframes ab-rotateIn    { from{opacity:0; transform:rotate(-10deg) scale(.88)} to{opacity:1; transform:rotate(0) scale(1)} }
@keyframes ab-zoomIn      { from{opacity:0; transform:scale(.65)} to{opacity:1; transform:scale(1)} }

@keyframes ab-bounce {
    0%,100% { transform:translateY(0); animation-timing-function:cubic-bezier(.215,.61,.355,1); }
    40%      { transform:translateY(-14px); animation-timing-function:cubic-bezier(.755,.05,.855,.06); }
    70%      { transform:translateY(-7px);  animation-timing-function:cubic-bezier(.755,.05,.855,.06); }
    90%      { transform:translateY(-3px); }
}

@keyframes ab-pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
@keyframes ab-flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1} 20%,24%,55%{opacity:.6} }

@keyframes ab-glitch-main {
    0%,100% { transform:translate(0); }
    20%      { transform:translate(-3px,1px); }
    40%      { transform:translate(-1px,-1px); }
    60%      { transform:translate(3px,1px); }
    80%      { transform:translate(1px,-1px); }
}

.amourco-banner__title[data-animation="fadeIn"]       { animation: ab-fadeIn      var(--ab-speed,.8s) ease both; }
.amourco-banner__title[data-animation="slideInLeft"]  { animation: ab-slideInLeft var(--ab-speed,.8s) cubic-bezier(.16,1,.3,1) both; }
.amourco-banner__title[data-animation="slideInRight"] { animation: ab-slideInRight var(--ab-speed,.8s) cubic-bezier(.16,1,.3,1) both; }
.amourco-banner__title[data-animation="slideUp"]      { animation: ab-slideUp     var(--ab-speed,.8s) cubic-bezier(.16,1,.3,1) both; }
.amourco-banner__title[data-animation="bounce"]       { animation: ab-bounce      var(--ab-speed,1s) ease both; }
.amourco-banner__title[data-animation="pulse"]        { animation: ab-pulse       var(--ab-speed,1.6s) ease-in-out infinite; }
.amourco-banner__title[data-animation="flicker"]      { animation: ab-flicker     var(--ab-speed,2s) linear infinite; }
.amourco-banner__title[data-animation="rotateIn"]     { animation: ab-rotateIn    var(--ab-speed,.7s) cubic-bezier(.16,1,.3,1) both; }
.amourco-banner__title[data-animation="zoomIn"]       { animation: ab-zoomIn      var(--ab-speed,.7s) cubic-bezier(.16,1,.3,1) both; }
.amourco-banner__title[data-animation="glitch"]       { animation: ab-glitch-main var(--ab-speed,3s) linear infinite; }

.amourco-banner__title[data-animation="pulse"][data-repeat="no"],
.amourco-banner__title[data-animation="flicker"][data-repeat="no"],
.amourco-banner__title[data-animation="glitch"][data-repeat="no"] {
    animation-iteration-count: 1;
}

@media (prefers-reduced-motion:reduce) {
    .amourco-banner__title[data-animation] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =====================================================================
   POPUP
===================================================================== */
.amourco-popup {
    position: fixed; inset: 0;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.amourco-popup__overlay {
    position: absolute; inset: 0;
    background: var(--popup-overlay, rgba(0,0,0,.55));
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.amourco-popup__dialog {
    position: relative;
    border-radius: 8px;
    padding: clamp(24px, 4vw, 48px);
    width: 100%;
    box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: ab-zoomIn .3s cubic-bezier(.16,1,.3,1) both;
}

.amourco-popup__close {
    position: absolute;
    top: 12px; right: 14px;
    background: none; border: none;
    font-size: 28px; line-height: 1;
    cursor: pointer;
    opacity: .35;
    color: inherit;
    transition: opacity .15s, background .15s;
    padding: 2px 6px;
    border-radius: 50%;
}

.amourco-popup__close:hover { opacity: 1; background: rgba(0,0,0,.07); }

.amourco-popup__title {
    margin: 0 0 18px;
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.3;
    padding-right: 36px;
}

.amourco-popup__content { font-size: 15px; line-height: 1.65; }
.amourco-popup__content p:last-child { margin-bottom: 0; }

body.ab-popup-open { overflow: hidden; }