/* KobPopup Modal - Scoped styles to prevent main website interference */
/* 
 * IMPORTANT: All styles in this file are carefully scoped to prevent affecting 
 * the main website layout, typography, or styling. 
 *
 * Scoping Strategy:
 * - All selectors use .kob-popup, .kob-popup-*, or button.kob-popup-trigger prefixes
 * - No global selectors that could interfere with main website
 * - Styles only apply to popup elements and their children
 * - Trigger buttons are specifically scoped to .kob-popup-trigger class
 */

/* Scoped trigger button styles - only affect popup triggers */
button.kob-popup-trigger {
    border: none;
}

/* Remove borders and backgrounds for image buttons */
button.kob-popup-trigger img,
.kob-popup-trigger img,
button.kob-popup-trigger img:hover,
.kob-popup-trigger img:hover,
button.kob-popup-trigger img:focus,
.kob-popup-trigger img:focus,
button.kob-popup-trigger img:active,
.kob-popup-trigger img:active {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Ensure the button containing an image has no styling */
button.kob-popup-trigger:has(img),
.kob-popup-trigger:has(img) {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fallback for browsers that don't support :has() - target buttons with only img children */
button.kob-popup-trigger[data-img-only="true"],
.kob-popup-trigger[data-img-only="true"] {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
}

/* Additional theme overrides for image buttons */
button.kob-popup-trigger[data-img-only="true"]:hover,
button.kob-popup-trigger[data-img-only="true"]:focus,
button.kob-popup-trigger[data-img-only="true"]:active,
.kob-popup-trigger[data-img-only="true"]:hover,
.kob-popup-trigger[data-img-only="true"]:focus,
.kob-popup-trigger[data-img-only="true"]:active {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
}

/* Protect against WordPress core button styles */
.wp-block-button .kob-popup-trigger[data-img-only="true"],
.wp-element-button.kob-popup-trigger[data-img-only="true"],
input[type="submit"].kob-popup-trigger[data-img-only="true"],
input[type="button"].kob-popup-trigger[data-img-only="true"],
button[type="submit"].kob-popup-trigger[data-img-only="true"] {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-radius: 0 !important;
}

/* Protect against common theme button classes */
.btn.kob-popup-trigger[data-img-only="true"],
.button.kob-popup-trigger[data-img-only="true"],
.wp-block-button__link.kob-popup-trigger[data-img-only="true"] {
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
}

.kob-popup { 
    display: none; 
    position: fixed !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483647 !important; /* Maximum safe z-index value */
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    align-items: center;
    justify-content: center;
    padding: 16px;
    --kob-panel-bg: #fff;
    --kob-panel-padding: 20px;
    --kob-body-padding-top: 60px;
    --kob-panel-border-width: 0px;
    --kob-panel-border-style: solid;
    --kob-panel-border-color: #dddddd;
    --kob-panel-radius: 12px;
    --kob-overlay-bg: rgba(0,0,0,0.7);
    --kob-close-bg: rgba(0,0,0,0.8);
    --kob-close-color: #fff;
    --kob-close-size: 40px;
    --kob-close-radius: 20px;
    --kob-close-font-size: 24px;
    --kob-animation-duration: 300ms;
}

.kob-popup[aria-hidden="false"] { 
    display: flex !important; 
    pointer-events: auto;
}

.kob-popup.kob-popup-position-top {
    align-items: flex-start;
    justify-content: center;
}

.kob-popup.kob-popup-position-bottom {
    align-items: flex-end;
    justify-content: center;
}

.kob-popup.kob-popup-position-left {
    align-items: center;
    justify-content: flex-start;
}

.kob-popup.kob-popup-position-right {
    align-items: center;
    justify-content: flex-end;
}

.kob-popup-backdrop { 
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--kob-overlay-bg) !important; 
    backdrop-filter: blur(3px) !important; /* Modern browsers blur effect */
    -webkit-backdrop-filter: blur(3px) !important; /* Safari support */
    z-index: 1 !important;
    cursor: pointer;
    transition: backdrop-filter 0.3s ease !important;
}

.kob-popup.kob-popup-no-overlay .kob-popup-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.kob-popup-panel,
body .kob-popup .kob-popup-panel,
html body .kob-popup .kob-popup-panel { 
    position: relative !important; 
    margin: 0 !important;
    background: var(--kob-panel-bg) !important;
    border-radius: var(--kob-panel-radius) !important;
    border: var(--kob-panel-border-width) var(--kob-panel-border-style) var(--kob-panel-border-color) !important;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5) !important;
    overflow: hidden !important;
    max-width: 90vw !important;
    max-height: 94vh !important; /* Increased to leave minimal margin */
    height: auto !important;
    z-index: 2 !important;
    transform: translateZ(0) !important; /* Force GPU acceleration */
    width: auto !important;
    display: block !important;
}

.kob-popup-close-btn-wrapper { 
    position: absolute !important; 
    top: 15px !important;
    right: 15px !important;
    z-index: 10 !important;
}

.kob-popup-close {
    background: var(--kob-close-bg) !important;
    border: 0 !important;
    font-size: var(--kob-close-font-size) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    width: var(--kob-close-size) !important;
    height: var(--kob-close-size) !important;
    border-radius: var(--kob-close-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--kob-close-color) !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    font-family: sans-serif !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.kob-popup-close:hover { 
    background: rgba(0,0,0,1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

.kob-popup-body,
body .kob-popup .kob-popup-body,
html body .kob-popup .kob-popup-body { 
    padding: var(--kob-panel-padding) !important;
    background: var(--kob-panel-bg) !important;
    padding-top: var(--kob-body-padding-top) !important;
    padding-bottom: var(--kob-panel-padding) !important;
    overflow: hidden !important; /* Remove all scrollbars */
    /* No max-height here so configured height is not capped */
    width: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

.kob-popup.kob-popup-no-close .kob-popup-close-btn-wrapper {
    display: none !important;
}

.kob-popup-inline-content,
.kob-popup .popup-content-wrapper.kob-popup-inline-content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kob-popup-inline-image,
.kob-popup-inline-image-link img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(94vh - 80px) !important;
}

/* Footer removed - no longer needed */

.kob-popup-loading { 
    color: #666 !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 40px 20px !important;
    transition: opacity 0.3s ease !important;
}

/* Preloading and content states */
.kob-popup-body[data-kob-preloading="1"] {
    position: relative !important;
}

.kob-popup-body[data-kob-preloading="1"]::after {
    content: '⏳ Preparing content...' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 20px 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    font-size: 14px !important;
    color: #666 !important;
    z-index: 10 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    animation: kobPopupPulse 1.5s ease-in-out infinite !important;
}

/* Smooth content transitions */
.kob-popup-body iframe,
.kob-popup-body > div {
    transition: opacity 0.3s ease !important;
}

/* Enhanced loading animation */
@keyframes kobPopupPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Background inheritance for consistent theming */
.kob-popup-body.kob-popup-themed {
    /* Styles will be applied dynamically via JavaScript based on page background */
    background-attachment: local !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
}

/* Ensure iframe content matches page background */
.kob-popup-body iframe {
    background: transparent !important;
}

/* Better visual consistency with page content */
.kob-popup-panel.kob-popup-themed {
    background: inherit !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .kob-popup-panel { 
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 2vh) !important;
    }
    .kob-popup-body { 
        padding: 15px !important;
        padding-top: 50px !important;
        /* No max-height in mobile to avoid overriding configured height */
        overflow: hidden !important;
    }
    .kob-popup-close-btn-wrapper {
        top: 10px !important;
        right: 10px !important;
    }
}

/* Ensure popup appears above common high z-index elements */
.kob-popup {
    z-index: 2147483647 !important; /* Higher than most themes/plugins */
}

/* Scoped styles - only affect popup elements, not main website */
.kob-popup * {
    box-sizing: border-box !important;
}

/* Prevent scrollbars on all popup content */
.kob-popup-body *,
.kob-popup-body iframe,
.kob-popup-body iframe body,
.kob-popup-body iframe html {
    overflow: hidden !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

/* Webkit scrollbar hiding */
.kob-popup-body *::-webkit-scrollbar,
.kob-popup-body iframe::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force fixed heights and prevent expansion */
.kob-popup-body div,
.kob-popup-body iframe {
    max-height: 100% !important;
    height: auto !important;
}

.kob-popup .popup-content-wrapper,
.kob-popup-body .popup-content-wrapper {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.kob-popup-body .kob-popup-inline-content,
.kob-popup-body .popup-content-wrapper.kob-popup-inline-content {
    max-height: none !important;
}

/* Prevent iframe content from causing scrollbars */
.kob-popup iframe {
    scrolling: no !important;
    overflow: hidden !important;
    border: none !important;
}

/* Protect against theme container width restrictions - scoped to popup only */
.kob-popup .kob-popup-panel {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
}

.kob-popup .kob-popup-body {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
}

/* Animation for smooth appearance */
.kob-popup[aria-hidden="false"] .kob-popup-panel {
    animation-duration: var(--kob-animation-duration);
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}

.kob-popup.kob-popup-animation-none[aria-hidden="false"] .kob-popup-panel {
    animation-name: none;
}

.kob-popup.kob-popup-animation-fade[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupFadeIn;
}

.kob-popup.kob-popup-animation-zoomIn[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupZoomIn;
}

.kob-popup.kob-popup-animation-slideUp[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupSlideUp;
}

.kob-popup.kob-popup-animation-slideDown[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupSlideDown;
}

.kob-popup.kob-popup-animation-slideLeft[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupSlideLeft;
}

.kob-popup.kob-popup-animation-slideRight[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupSlideRight;
}

.kob-popup.kob-popup-animation-bounce[aria-hidden="false"] .kob-popup-panel {
    animation-name: kobPopupBounce;
    animation-timing-function: cubic-bezier(.17,.67,.31,1.25);
}

@keyframes kobPopupFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kobPopupZoomIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes kobPopupSlideUp {
    from { opacity: 0; transform: translateY(36px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes kobPopupSlideDown {
    from { opacity: 0; transform: translateY(-36px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes kobPopupSlideLeft {
    from { opacity: 0; transform: translateX(36px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes kobPopupSlideRight {
    from { opacity: 0; transform: translateX(-36px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes kobPopupBounce {
    0% { opacity: 0; transform: scale(0.86); }
    60% { opacity: 1; transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}