/*
 * KStory standalone utilities
 * This file provides the small utility/component layer used by the plugin.
 * It is intentionally scoped to the KStory shortcode to avoid changing the active theme.
 */

body.kstory-modal-open {
    overflow: hidden !important;
}

#kstory-shortcode-container,
#kstory-shortcode-container * {
    box-sizing: border-box;
}

#kstory-shortcode-container .d-none { display: none !important; }
#kstory-shortcode-container .d-block { display: block !important; }
#kstory-shortcode-container .d-flex { display: flex !important; }
#kstory-shortcode-container .flex-column { flex-direction: column !important; }
#kstory-shortcode-container .align-items-center { align-items: center !important; }
#kstory-shortcode-container .justify-content-center { justify-content: center !important; }
#kstory-shortcode-container .justify-content-between { justify-content: space-between !important; }
#kstory-shortcode-container .justify-content-end { justify-content: flex-end !important; }
#kstory-shortcode-container .flex-fill-2 { flex: 0 0 auto !important; }

#kstory-shortcode-container .gap-1 { gap: .25rem !important; }
#kstory-shortcode-container .gap-2 { gap: .5rem !important; }
#kstory-shortcode-container .gap-3 { gap: 1rem !important; }

#kstory-shortcode-container .position-relative { position: relative !important; }
#kstory-shortcode-container .position-absolute { position: absolute !important; }
#kstory-shortcode-container .position-unset { position: static !important; }
#kstory-shortcode-container .top-0 { top: 0 !important; }
#kstory-shortcode-container .top-50 { top: 50% !important; }
#kstory-shortcode-container .start-0 { left: 0 !important; }
#kstory-shortcode-container .end-0 { right: 0 !important; }
#kstory-shortcode-container .translate-middle-y { transform: translateY(-50%) !important; }

#kstory-shortcode-container .w-100 { width: 100% !important; }
#kstory-shortcode-container .h-100 { height: 100% !important; }
#kstory-shortcode-container .overflow-hidden { overflow: hidden !important; }
#kstory-shortcode-container .overflow-visible { overflow: visible !important; }

#kstory-shortcode-container .rounded-circle { border-radius: 50% !important; }
#kstory-shortcode-container .rounded-pill { border-radius: 999px !important; }
#kstory-shortcode-container .rounded-6 { border-radius: 6px !important; }
#kstory-shortcode-container .rounded-8 { border-radius: 8px !important; }

#kstory-shortcode-container .border-0 { border: 0 !important; }
#kstory-shortcode-container .shadow-none { box-shadow: none !important; }
#kstory-shortcode-container .bg-white { background-color: #fff !important; }

#kstory-shortcode-container .text-center { text-align: center !important; }
#kstory-shortcode-container .text-white { color: #fff !important; }
#kstory-shortcode-container .text-dark,
#kstory-shortcode-container .text-dark-10,
#kstory-shortcode-container .text-dark-15 { color: #212121 !important; }
#kstory-shortcode-container .text-gray-9 { color: #62666d !important; }
#kstory-shortcode-container .text-warning-8 { color: #f9a825 !important; }
#kstory-shortcode-container .text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#kstory-shortcode-container .dir-ltr { direction: ltr !important; }

#kstory-shortcode-container .fs-11 { font-size: 11px !important; }
#kstory-shortcode-container .fs-12 { font-size: 12px !important; }
#kstory-shortcode-container .fs-14 { font-size: 14px !important; }
#kstory-shortcode-container .fs-16 { font-size: 16px !important; }
#kstory-shortcode-container .fs-18 { font-size: 18px !important; }
#kstory-shortcode-container .fs-19 { font-size: 19px !important; }
#kstory-shortcode-container .fs-20 { font-size: 20px !important; }
#kstory-shortcode-container .fs-24 { font-size: 24px !important; }
#kstory-shortcode-container .fw-normal { font-weight: 400 !important; }
#kstory-shortcode-container .fw-bold { font-weight: 700 !important; }
#kstory-shortcode-container .lh-1 { line-height: 1 !important; }
#kstory-shortcode-container .line-height-18 { line-height: 18px !important; }
#kstory-shortcode-container .line-height-22 { line-height: 22px !important; }
#kstory-shortcode-container .line-height-24 { line-height: 24px !important; }
#kstory-shortcode-container .line-height-25 { line-height: 25px !important; }
#kstory-shortcode-container .line-height-26 { line-height: 26px !important; }
#kstory-shortcode-container .line-height-30 { line-height: 30px !important; }

#kstory-shortcode-container .p-2 { padding: .5rem !important; }
#kstory-shortcode-container .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
#kstory-shortcode-container .mt-2 { margin-top: .5rem !important; }
#kstory-shortcode-container .mt-17 { margin-top: 17px !important; }
#kstory-shortcode-container .mb-3 { margin-bottom: 1rem !important; }
#kstory-shortcode-container .mb-12 { margin-bottom: 12px !important; }
#kstory-shortcode-container .mb-17 { margin-bottom: 17px !important; }
#kstory-shortcode-container .ms-auto { margin-left: auto !important; }
#kstory-shortcode-container .ms-1 { margin-left: .25rem !important; }
#kstory-shortcode-container .mr-6 { margin-right: 6px !important; }
#kstory-shortcode-container .mx-auto { margin-right: auto !important; margin-left: auto !important; }

#kstory-shortcode-container .cursor-pointer { cursor: pointer !important; }
#kstory-shortcode-container .transition-ease-in-out { transition: all .25s ease-in-out !important; }
#kstory-shortcode-container .line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    white-space: normal !important;
}

#kstory-shortcode-container .form-control {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    border: 1px solid #dcdfe4 !important;
    background-color: #fff !important;
    font-family: inherit !important;
    outline: none !important;
}

#kstory-shortcode-container .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .2s ease-in-out !important;
}
#kstory-shortcode-container .btn-danger-7 {
    background-color: #ef394e !important;
    border-color: #ef394e !important;
    color: #fff !important;
}
#kstory-shortcode-container .btn-outline-danger-7 {
    background-color: transparent !important;
    border-color: #ef394e !important;
    color: #ef394e !important;
}
#kstory-shortcode-container .btn:hover { opacity: .9 !important; }

/* Standalone modal component */
#kstory-shortcode-container .modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
    background-color: rgba(0, 0, 0, .5) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .2s ease, visibility .2s ease !important;
}
#kstory-shortcode-container .modal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#kstory-shortcode-container .modal:not(.show) {
    display: none !important;
}
#kstory-shortcode-container .modal-dialog {
    position: relative !important;
    width: auto !important;
    margin: 1.75rem auto !important;
    pointer-events: none !important;
}
#kstory-shortcode-container .modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
}
#kstory-shortcode-container .modal-content {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    pointer-events: auto !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    outline: 0 !important;
}
#kstory-shortcode-container .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
#kstory-shortcode-container .modal-title { margin: 0 !important; }
#kstory-shortcode-container .modal-body {
    position: relative !important;
    flex: 1 1 auto !important;
}
#kstory-shortcode-container .modal-close {
    border: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    color: inherit !important;
}

@media only screen and (max-width: 991px) {
    #kstory-shortcode-container .modal-mobile .modal-dialog {
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
    }
    #kstory-shortcode-container .modal-mobile .modal-content {
        min-height: 100% !important;
        border-radius: 0 !important;
    }
}