/**
 * Stili Frontend per WPAK Menu Conditions
 *
 * @package WPAK_Menu_Conditions
 */

/* ===========================
   PRE-RENDERED CONTENT (HIDDEN)
   These elements contain cached page content for modals.
   They should NEVER be visible on the page.
   =========================== */

.wpak-prerendered-content,
div.wpak-prerendered-content,
body .wpak-prerendered-content,
html body .wpak-prerendered-content {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* ===========================
   MODAL OVERLAY
   =========================== */

.wpak-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--wpak-anim-duration, 0.45s) ease, visibility var(--wpak-anim-duration, 0.45s) ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    --wpak-anim-duration: 0.45s;
}

.wpak-modal-overlay[data-overlay-fade="0"] {
    transition: none;
}

.wpak-modal-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ===========================
   MODAL CONTAINER - CSS Variables based
   =========================== */

.wpak-modal-container {
    background: #fff;
    /* Use CSS variables for all dimensions */
    width: var(--wpak-width, 600px);
    max-width: var(--wpak-max-width, 90%);
    height: var(--wpak-height, auto);
    max-height: var(--wpak-max-height, 90vh);
    border-radius: var(--wpak-border-radius, 8px);
    box-shadow: var(--wpak-box-shadow, 0 10px 30px rgba(0, 0, 0, 0.3));
    border-width: var(--wpak-border-width, 0);
    border-style: var(--wpak-border-style, solid);
    border-color: var(--wpak-border-color, transparent);
    margin: var(--wpak-container-margin, 20px);
    display: flex;
    flex-direction: column;
    transform: translateY(-20px);
    transition: transform var(--wpak-anim-duration, 0.45s) ease;
    overflow: hidden;
}

.wpak-modal-container.has-external-close {
    overflow: visible;
    position: relative;
}

.wpak-modal-overlay.is-active .wpak-modal-container {
    transform: translateY(0);
}

/* ===========================
   ANIMAZIONI
   =========================== */

/* No Animation */
.wpak-modal-overlay[data-animation="none"] .wpak-modal-container {
    transform: none;
    opacity: 1;
}

/* Fade (default) */
.wpak-modal-overlay[data-animation="fade"] .wpak-modal-container {
    transform: none;
    opacity: 0;
    transition: opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="fade"].is-active .wpak-modal-container {
    opacity: 1;
}

/* Slide Down */
.wpak-modal-overlay[data-animation="slideDown"] .wpak-modal-container {
    transform: translateY(-100vh);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpak-modal-overlay[data-animation="slideDown"].is-active .wpak-modal-container {
    transform: translateY(0);
}

/* Slide Up */
.wpak-modal-overlay[data-animation="slideUp"] .wpak-modal-container {
    transform: translateY(100vh);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpak-modal-overlay[data-animation="slideUp"].is-active .wpak-modal-container {
    transform: translateY(0);
}

/* Slide Left */
.wpak-modal-overlay[data-animation="slideLeft"] .wpak-modal-container {
    transform: translateX(-100vw);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpak-modal-overlay[data-animation="slideLeft"].is-active .wpak-modal-container {
    transform: translateX(0);
}

/* Slide Right */
.wpak-modal-overlay[data-animation="slideRight"] .wpak-modal-container {
    transform: translateX(100vw);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wpak-modal-overlay[data-animation="slideRight"].is-active .wpak-modal-container {
    transform: translateX(0);
}

/* Zoom In */
.wpak-modal-overlay[data-animation="zoomIn"] .wpak-modal-container {
    transform: scale(0.5);
    opacity: 0;
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="zoomIn"].is-active .wpak-modal-container {
    transform: scale(1);
    opacity: 1;
}

/* Zoom Out */
.wpak-modal-overlay[data-animation="zoomOut"] .wpak-modal-container {
    transform: scale(1.3);
    opacity: 0;
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="zoomOut"].is-active .wpak-modal-container {
    transform: scale(1);
    opacity: 1;
}

/* Bounce */
.wpak-modal-overlay[data-animation="bounce"] .wpak-modal-container {
    transform: scale(0.3);
    opacity: 0;
}

.wpak-modal-overlay[data-animation="bounce"].is-active .wpak-modal-container {
    animation: wpak-bounce var(--wpak-anim-duration, 0.45s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes wpak-bounce {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Flip */
.wpak-modal-overlay[data-animation="flip"] .wpak-modal-container {
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
    transition: transform var(--wpak-anim-duration, 0.45s) ease, opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="flip"].is-active .wpak-modal-container {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
}

/* Rotate */
.wpak-modal-overlay[data-animation="rotate"] .wpak-modal-container {
    transform: rotate(-180deg) scale(0.5);
    opacity: 0;
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.34, 1.56, 0.64, 1), opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="rotate"].is-active .wpak-modal-container {
    transform: rotate(0) scale(1);
    opacity: 1;
}

/* Swing */
.wpak-modal-overlay[data-animation="swing"] .wpak-modal-container {
    transform: rotate(-10deg);
    transform-origin: top center;
    opacity: 0;
}

.wpak-modal-overlay[data-animation="swing"].is-active .wpak-modal-container {
    animation: wpak-swing var(--wpak-anim-duration, 0.45s) ease forwards;
}

@keyframes wpak-swing {
    0% {
        opacity: 0;
        transform: rotate(-10deg);
    }

    20% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Elastic */
.wpak-modal-overlay[data-animation="elastic"] .wpak-modal-container {
    transform: scale(0.5);
    opacity: 0;
}

.wpak-modal-overlay[data-animation="elastic"].is-active .wpak-modal-container {
    animation: wpak-elastic var(--wpak-anim-duration, 0.45s) cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes wpak-elastic {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    55% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.95);
    }

    85% {
        transform: scale(1.02);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Legacy support for old 'slide' and 'scale' values */
.wpak-modal-overlay[data-animation="slide"] .wpak-modal-container {
    transform: translateY(-100vh);
    transition: transform var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="slide"].is-active .wpak-modal-container {
    transform: translateY(0);
}

.wpak-modal-overlay[data-animation="scale"] .wpak-modal-container {
    transform: scale(0.8);
    opacity: 0;
    transition: transform var(--wpak-anim-duration, 0.45s) ease, opacity var(--wpak-anim-duration, 0.45s) ease;
}

.wpak-modal-overlay[data-animation="scale"].is-active .wpak-modal-container {
    transform: scale(1);
    opacity: 1;
}

/* ===========================
   POSIZIONI MODAL
   =========================== */

/* Centro (default) - già gestito da flex */

/* Alto */
.wpak-modal-overlay[data-position="top"] {
    align-items: flex-start;
}

.wpak-modal-overlay[data-position="top"] .wpak-modal-container {
    margin-top: var(--wpak-container-margin, 20px);
}

/* Basso */
.wpak-modal-overlay[data-position="bottom"] {
    align-items: flex-end;
}

.wpak-modal-overlay[data-position="bottom"] .wpak-modal-container {
    margin-bottom: var(--wpak-container-margin, 20px);
}

/* Sinistra */
.wpak-modal-overlay[data-position="left"] {
    justify-content: flex-start;
}

.wpak-modal-overlay[data-position="left"] .wpak-modal-container {
    margin-left: var(--wpak-container-margin, 20px);
}

/* Destra */
.wpak-modal-overlay[data-position="right"] {
    justify-content: flex-end;
}

.wpak-modal-overlay[data-position="right"] .wpak-modal-container {
    margin-right: var(--wpak-container-margin, 20px);
}

/* Alto Sinistra */
.wpak-modal-overlay[data-position="top-left"] {
    align-items: flex-start;
    justify-content: flex-start;
}

.wpak-modal-overlay[data-position="top-left"] .wpak-modal-container {
    margin: var(--wpak-container-margin, 20px);
}

/* Alto Destra */
.wpak-modal-overlay[data-position="top-right"] {
    align-items: flex-start;
    justify-content: flex-end;
}

.wpak-modal-overlay[data-position="top-right"] .wpak-modal-container {
    margin: var(--wpak-container-margin, 20px);
}

/* Basso Sinistra */
.wpak-modal-overlay[data-position="bottom-left"] {
    align-items: flex-end;
    justify-content: flex-start;
}

.wpak-modal-overlay[data-position="bottom-left"] .wpak-modal-container {
    margin: var(--wpak-container-margin, 20px);
}

/* Basso Destra */
.wpak-modal-overlay[data-position="bottom-right"] {
    align-items: flex-end;
    justify-content: flex-end;
}

.wpak-modal-overlay[data-position="bottom-right"] .wpak-modal-container {
    margin: var(--wpak-container-margin, 20px);
}

/* ===========================
   PADDING CONTENUTO - CSS Variables
   =========================== */

.wpak-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--wpak-body-padding-top, 20px) var(--wpak-body-padding-right, 20px) var(--wpak-body-padding-bottom, 20px) var(--wpak-body-padding-left, 20px);
}

/* ===========================
   MODAL HEADER - CSS Variables
   =========================== */

.wpak-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--wpak-header-padding-top, 15px) var(--wpak-header-padding-right, 20px) var(--wpak-header-padding-bottom, 15px) var(--wpak-header-padding-left, 20px);
    border-bottom-width: var(--wpak-header-border-width, 1px);
    border-bottom-style: solid;
    border-bottom-color: var(--wpak-header-border-color, #eee);
    background: #f9f9f9;
    transition: all 0.3s ease;
}

/* Header nascosto */
.wpak-modal-overlay[data-header-enabled="0"] .wpak-modal-header {
    display: none;
}

/* Header Sticky */
.wpak-modal-overlay[data-header-sticky="1"] .wpak-modal-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Layout Header */
.wpak-modal-overlay[data-header-layout="title-only"] .wpak-modal-header .wpak-modal-close {
    display: none;
}

.wpak-modal-overlay[data-header-layout="close-title"] .wpak-modal-header {
    flex-direction: row-reverse;
}

.wpak-modal-overlay[data-header-layout="close-only"] .wpak-modal-header .wpak-modal-title {
    display: none;
}

.wpak-modal-overlay[data-header-layout="menu-only"] .wpak-modal-header .wpak-modal-title,
.wpak-modal-overlay[data-header-layout="menu-only"] .wpak-modal-header .wpak-modal-close {
    display: none;
}

.wpak-modal-overlay[data-header-layout="menu-only"] .wpak-modal-header-menu-wrap {
    display: block;
    width: 100%;
}

/* Layout menu-title-close: Menu sopra, poi titolo + chiudi */
.wpak-modal-overlay[data-header-layout="menu-title-close"] .wpak-modal-header {
    flex-wrap: wrap;
}

.wpak-modal-overlay[data-header-layout="menu-title-close"] .wpak-modal-header-menu-wrap {
    width: 100%;
    order: -1;
    margin-bottom: 10px;
}

/* Menu position: below (sotto il titolo) */
.wpak-modal-header[data-menu-position="below"] {
    flex-wrap: wrap;
}

.wpak-modal-header[data-menu-position="below"] .wpak-modal-header-menu-wrap {
    width: 100%;
    order: 10;
    margin-top: 10px;
}

.wpak-modal-title {
    margin: 0;
    font-size: var(--wpak-title-font-size, 18px);
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    flex: 1;
}

/* Allineamento Titolo */
.wpak-modal-overlay[data-title-alignment="left"] .wpak-modal-title {
    text-align: left;
}

.wpak-modal-overlay[data-title-alignment="center"] .wpak-modal-title {
    text-align: center;
}

.wpak-modal-overlay[data-title-alignment="right"] .wpak-modal-title {
    text-align: right;
}

/* ===========================
   MODAL CLOSE BUTTON
   =========================== */

.wpak-modal-close {
    background: none;
    border: none;
    font-size: var(--wpak-close-btn-size, 28px);
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease;
}



.wpak-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #333;
}

.wpak-modal-close:focus {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* ===========================
   MODAL BODY (Styles defined above with CSS variables)
   =========================== */

.wpak-modal-content {
    line-height: 1.6;
}

.wpak-modal-content img {
    max-width: 100%;
    height: auto;
}

.wpak-modal-content a {
    color: #2271b1;
}

/* Mantiene gli stili originali del contenuto se richiesto */
.wpak-modal-overlay[data-content-preserve-css="1"] .wpak-modal-content {
    line-height: inherit;
    color: inherit;
    font: inherit;
}

.wpak-modal-overlay[data-content-preserve-css="1"] .wpak-modal-content a {
    color: inherit;
}

.wpak-modal-overlay[data-content-preserve-css="1"] .wpak-modal-content img {
    max-width: none;
}

/* Modal Live (iframe) */
.wpak-modal-live-wrap {
    display: none;
    width: 100%;
    min-height: 360px;
    overflow: hidden;
    border-radius: inherit;
}

.wpak-modal-live-wrap[hidden] {
    display: none !important;
}

.wpak-modal-live-frame {
    display: block;
    width: 100%;
    height: 70vh;
    min-height: 360px;
    border: 0;
    background: #fff;
}

.wpak-modal-overlay[data-runtime-mode="live"] .wpak-modal-body {
    display: flex;
    flex-direction: column;
}

/* ===========================
   PULSANTE CHIUDI - STILI
   =========================== */

/* Dimensioni pulsante chiudi - Gestito da CSS Variable --wpak-close-btn-size */


/* Stile cerchio */
.wpak-modal-overlay[data-close-btn-style="circle"] .wpak-modal-close {
    background: rgba(0, 0, 0, 0.1);
    font-size: 20px;
}

.wpak-modal-overlay[data-close-btn-style="circle"] .wpak-modal-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* Stile icon-x (✕ più definita) */
.wpak-modal-overlay[data-close-btn-style="icon-x"] .wpak-modal-close {
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 300;
}

/* Stile icon-arrow (freccia ←) */
.wpak-modal-overlay[data-close-btn-style="icon-arrow"] .wpak-modal-close {
    font-size: 1.2em;
}

/* Stile text ("Chiudi") */
.wpak-modal-overlay[data-close-btn-style="text"] .wpak-modal-close {
    width: auto;
    height: auto;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
}

/* Stile icon-text (icona + testo) */
.wpak-modal-overlay[data-close-btn-style="icon-text"] .wpak-modal-close {
    width: auto;
    height: auto;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 4px;
    gap: 6px;
}

/* Stile nascosto */
.wpak-modal-overlay[data-close-btn-style="none"] .wpak-modal-close {
    display: none;
}

/* Pulsante chiudi esterno (fuori dalla modal) */
.wpak-modal-close-external {
    position: absolute;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    width: var(--wpak-close-btn-size, 28px);
    height: var(--wpak-close-btn-size, 28px);
    font-size: calc(var(--wpak-close-btn-size, 28px) * 0.55);
    line-height: 1;
}

.wpak-modal-overlay[data-close-btn-position="outside-topright"] .wpak-modal-close-external {
    top: calc(var(--wpak-close-btn-size, 28px) * -0.5);
    right: calc(var(--wpak-close-btn-size, 28px) * -0.5);
}

.wpak-modal-overlay[data-close-btn-position="outside-topleft"] .wpak-modal-close-external {
    top: calc(var(--wpak-close-btn-size, 28px) * -0.5);
    left: calc(var(--wpak-close-btn-size, 28px) * -0.5);
}

/* Dimensioni pulsante chiudi esterno */
.wpak-modal-overlay[data-close-btn-size="sm"] .wpak-modal-close-external {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.wpak-modal-overlay[data-close-btn-size="md"] .wpak-modal-close-external {
    width: 36px;
    height: 36px;
    font-size: 20px;
}

.wpak-modal-overlay[data-close-btn-size="lg"] .wpak-modal-close-external {
    width: 44px;
    height: 44px;
    font-size: 24px;
}

/* ===========================
   MODAL FOOTER - CSS Variables
   =========================== */

.wpak-modal-footer {
    display: none;
    align-items: center;
    padding: var(--wpak-footer-padding-top, 15px) var(--wpak-footer-padding-right, 20px) var(--wpak-footer-padding-bottom, 15px) var(--wpak-footer-padding-left, 20px);
    border-top-width: var(--wpak-footer-border-width, 1px);
    border-top-style: solid;
    border-top-color: var(--wpak-footer-border-color, #eee);
    background: #f9f9f9;
    gap: 10px;
}

/* Footer abilitato */
.wpak-modal-overlay[data-footer-enabled="1"] .wpak-modal-footer {
    display: flex;
}

/* Footer Sticky */
.wpak-modal-overlay[data-footer-sticky="1"] .wpak-modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* Allineamento Footer */
.wpak-modal-overlay[data-footer-alignment="left"] .wpak-modal-footer {
    justify-content: flex-start;
}

.wpak-modal-overlay[data-footer-alignment="center"] .wpak-modal-footer {
    justify-content: center;
}

.wpak-modal-overlay[data-footer-alignment="right"] .wpak-modal-footer {
    justify-content: flex-end;
}

.wpak-modal-overlay[data-footer-alignment="space-between"] .wpak-modal-footer {
    justify-content: space-between;
}

.wpak-modal-footer[data-menu-position="left"] {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.wpak-modal-footer[data-menu-position="center"] {
    flex-wrap: wrap;
    justify-content: center;
}

.wpak-modal-footer[data-menu-position="right"] {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.wpak-modal-footer[data-menu-position="space-between"] {
    flex-wrap: wrap;
    justify-content: space-between;
}

.wpak-modal-footer-menu-wrap {
    width: 100%;
}

.wpak-modal-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 10px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wpak-modal-footer-menu a {
    text-decoration: none;
    color: var(--wpak-menu-link-color, inherit);
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.wpak-modal-footer-menu a:hover {
    background: var(--wpak-menu-link-hover-bg, rgba(0, 0, 0, 0.05));
    color: var(--wpak-menu-link-hover-color, inherit);
}

.wpak-modal-footer-menu a:active,
.wpak-modal-footer-menu .current-menu-item>a,
.wpak-modal-footer-menu .current-menu-ancestor>a {
    background: var(--wpak-menu-link-active-bg, rgba(0, 0, 0, 0.08));
    color: var(--wpak-menu-link-active-color, inherit);
}

/* ===========================
   PULSANTI FOOTER
   =========================== */

.wpak-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1.4;
}

.wpak-modal-btn:focus {
    outline: 2px solid rgba(34, 113, 177, 0.5);
    outline-offset: 2px;
}

/* Stile Filled */
.wpak-modal-btn-primary.style-filled {
    background: var(--wpak-btn-color, #2271b1);
    color: #fff;
    border-color: var(--wpak-btn-color, #2271b1);
}

.wpak-modal-btn-primary.style-filled:hover {
    filter: brightness(1.1);
}

/* Stile Outline */
.wpak-modal-btn-primary.style-outline,
.wpak-modal-btn-secondary.style-outline {
    background: transparent;
    color: var(--wpak-btn-color, #2271b1);
    border-color: var(--wpak-btn-color, #2271b1);
}

.wpak-modal-btn-primary.style-outline:hover,
.wpak-modal-btn-secondary.style-outline:hover {
    background: var(--wpak-btn-color, #2271b1);
    color: #fff;
}

/* Stile Text */
.wpak-modal-btn-primary.style-text,
.wpak-modal-btn-secondary.style-text {
    background: transparent;
    color: var(--wpak-btn-color, #2271b1);
    border-color: transparent;
    padding: 10px 15px;
}

.wpak-modal-btn-primary.style-text:hover,
.wpak-modal-btn-secondary.style-text:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Stile Secondary */
.wpak-modal-btn-secondary {
    background: #f0f0f1;
    color: #50575e;
    border-color: #c3c4c7;
}

.wpak-modal-btn-secondary:hover {
    background: #e0e0e1;
}

/* ===========================
   HEADER MENU WP
   =========================== */

.wpak-modal-header-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

.wpak-modal-header-menu-wrap:empty {
    display: none;
}

.wpak-modal-header-menu li {
    margin: 0;
}

.wpak-modal-header-menu a {
    display: inline-block;
    padding: 6px 12px;
    color: var(--wpak-menu-link-color, inherit);
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.wpak-modal-header-menu a:hover {
    background: var(--wpak-menu-link-hover-bg, rgba(0, 0, 0, 0.05));
    color: var(--wpak-menu-link-hover-color, inherit);
}

.wpak-modal-header-menu a:active,
.wpak-modal-header-menu .current-menu-item>a,
.wpak-modal-header-menu .current-menu-ancestor>a {
    background: var(--wpak-menu-link-active-bg, rgba(0, 0, 0, 0.08));
    color: var(--wpak-menu-link-active-color, inherit);
}

/* Posizione Menu nell'Header */
.wpak-modal-header[data-menu-position="left"] {
    flex-direction: row;
}

.wpak-modal-header[data-menu-position="left"] .wpak-modal-header-menu {
    order: -1;
    margin-right: auto;
}

.wpak-modal-header[data-menu-position="right"] .wpak-modal-header-menu {
    order: 1;
    margin-left: auto;
}

.wpak-modal-header[data-menu-position="center"] .wpak-modal-header-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.wpak-modal-header[data-menu-position="below"] {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
}

.wpak-modal-header[data-menu-position="below"] .wpak-modal-title {
    order: 1;
}

.wpak-modal-header[data-menu-position="below"] .wpak-modal-close {
    order: 2;
    margin-left: auto;
}

.wpak-modal-header[data-menu-position="below"] .wpak-modal-header-menu-wrap {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    margin-top: 4px;
}

/* ===========================
   DRAWER MODES (Mobile - JS Breakpoint)
   =========================== */

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-bottom"] .wpak-modal-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.32, 0.72, 0, 1);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-bottom"].is-active .wpak-modal-container {
    transform: translateY(0);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-left"] .wpak-modal-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    max-width: 85vw;
    width: 320px;
    max-height: 100%;
    border-radius: 0 16px 16px 0;
    transform: translateX(-100%);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.32, 0.72, 0, 1);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-left"].is-active .wpak-modal-container {
    transform: translateX(0);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-right"] .wpak-modal-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 85vw;
    width: 320px;
    max-height: 100%;
    border-radius: 16px 0 0 16px;
    transform: translateX(100%);
    transition: transform var(--wpak-anim-duration, 0.45s) cubic-bezier(0.32, 0.72, 0, 1);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-right"].is-active .wpak-modal-container {
    transform: translateX(0);
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="fullscreen"] .wpak-modal-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-container {
    width: 95%;
    max-height: 95vh;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-header {
    padding: 12px 15px;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-title {
    font-size: 16px;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-body {
    padding: 15px;
}

.wpak-modal-overlay[data-mobile-active="1"]:not([data-mobile-behavior="drawer-left"]):not([data-mobile-behavior="drawer-right"]):not([data-mobile-behavior="drawer-bottom"])[data-size="small"] .wpak-modal-container,
.wpak-modal-overlay[data-mobile-active="1"]:not([data-mobile-behavior="drawer-left"]):not([data-mobile-behavior="drawer-right"]):not([data-mobile-behavior="drawer-bottom"])[data-size="medium"] .wpak-modal-container,
.wpak-modal-overlay[data-mobile-active="1"]:not([data-mobile-behavior="drawer-left"]):not([data-mobile-behavior="drawer-right"]):not([data-mobile-behavior="drawer-bottom"])[data-size="large"] .wpak-modal-container,
.wpak-modal-overlay[data-mobile-active="1"]:not([data-mobile-behavior="drawer-left"]):not([data-mobile-behavior="drawer-right"]):not([data-mobile-behavior="drawer-bottom"])[data-size="xlarge"] .wpak-modal-container {
    max-width: 95%;
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-header="simplified"] .wpak-modal-title {
    display: none;
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-header="hidden"] .wpak-modal-header {
    display: none;
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-footer="sticky"] .wpak-modal-footer {
    position: sticky;
    bottom: 0;
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-footer="hidden"] .wpak-modal-footer {
    display: none !important;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-footer {
    flex-wrap: wrap;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-btn {
    flex: 1 1 auto;
    min-width: 120px;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-modal-header-menu {
    display: none;
}

.wpak-modal-overlay[data-mobile-active="1"] .wpak-drawer-handle {
    width: 40px;
    height: 4px;
    background: #d0d0d0;
    border-radius: 2px;
    margin: 8px auto;
    display: none;
}

.wpak-modal-overlay[data-mobile-active="1"][data-mobile-behavior="drawer-bottom"] .wpak-drawer-handle {
    display: block;
}

/* ===========================
   LOADER
   =========================== */

.wpak-modal-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
}

.wpak-modal-loader.is-hidden {
    display: none;
}

.wpak-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #2271b1;
    border-radius: 50%;
    animation: wpak-spin 0.8s linear infinite;
    margin-bottom: 15px;
}

@keyframes wpak-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===========================
   ERROR STATE
   =========================== */

.wpak-modal-error {
    text-align: center;
    color: #d63638;
    padding: 30px;
}

.wpak-modal-error::before {
    content: "!";
    display: block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    background: #fcf0f1;
    border-radius: 50%;
    margin: 0 auto 15px;
    font-size: 24px;
    font-weight: bold;
}

/* ===========================
   BODY LOCK (quando modal aperta)
   =========================== */

body.wpak-modal-open {
    overflow: hidden;
}

/* Responsive live iframe */
@media screen and (max-width: 782px) {
    .wpak-modal-live-wrap {
        min-height: 300px;
    }

    .wpak-modal-live-frame {
        min-height: 300px;
        height: 62vh;
    }
}

/* Tablet */
@media screen and (min-width: 783px) and (max-width: 1024px) {
    .wpak-modal-overlay[data-size="xlarge"] .wpak-modal-container {
        max-width: 90%;
    }
}

/* ===========================
   ACCESSIBILITA
   =========================== */

/* Focus visible per accessibilità */
.wpak-modal-trigger:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* Riduce movimento per chi lo preferisce */
@media (prefers-reduced-motion: reduce) {

    .wpak-modal-overlay,
    .wpak-modal-container,
    .wpak-spinner {
        transition: none;
        animation: none;
    }

    .wpak-modal-overlay[data-animation] .wpak-modal-container {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .wpak-modal-container {
        border: 2px solid #000;
    }

    .wpak-modal-close {
        border: 1px solid currentColor;
    }
}