/* ==========================================================================
   Zibll Guide Tip Plugin CSS v1.2 - Premium Glassmorphism & UI Enhancements
   ========================================================================== */

/* 1. Header Frameless Icon (Clean & Minimalist) */
a.zib-guide-tip-btn,
.zib-guide-tip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #f0ad4e !important;
    font-size: 15px !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
    transform: none !important;
    outline: none !important;
}

a.zib-guide-tip-btn[data-type="key"],
.zib-guide-tip-btn[data-type="key"] {
    color: #5cb85c !important;
}

a.zib-guide-tip-btn[data-type="note"],
.zib-guide-tip-btn[data-type="note"] {
    color: #00a2ff !important;
}

a.zib-guide-tip-btn[data-type="warning"],
.zib-guide-tip-btn[data-type="warning"] {
    color: #d9534f !important;
}

a.zib-guide-tip-btn::before,
a.zib-guide-tip-btn::after,
.zib-guide-tip-btn::before,
.zib-guide-tip-btn::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

a.zib-guide-tip-btn:hover,
.zib-guide-tip-btn:hover {
    transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    opacity: 0.75 !important;
}

i.zib-guide-tip-icon,
.zib-guide-tip-icon {
    font-size: 15px !important;
    margin-right: 2px !important;
    animation: none !important;
    text-shadow: none !important;
}

/* 2. Glassmorphism Modal & Glowing Border Accents */
.zib-guide-tip-dialog {
    max-width: 680px !important;
    width: 92% !important;
    margin: 35px auto !important;
}

@media (max-width: 767px) {
    .zib-guide-tip-dialog {
        max-width: 96% !important;
        width: 96% !important;
        margin: 15px auto !important;
    }
}

.guide-tip-modal-content {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 12px !important;
    transition: all 0.3s ease;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

/* Category-Tailored Glowing Borders */
.guide-tip-modal-content.type-tip {
    border: 1px solid rgba(240, 173, 78, 0.4) !important;
    box-shadow: 0 0 25px rgba(240, 173, 78, 0.25), 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.guide-tip-modal-content.type-key {
    border: 1px solid rgba(92, 184, 92, 0.4) !important;
    box-shadow: 0 0 25px rgba(92, 184, 92, 0.25), 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.guide-tip-modal-content.type-note {
    border: 1px solid rgba(0, 162, 255, 0.4) !important;
    box-shadow: 0 0 25px rgba(0, 162, 255, 0.25), 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

.guide-tip-modal-content.type-warning {
    border: 1px solid rgba(217, 83, 79, 0.4) !important;
    box-shadow: 0 0 25px rgba(217, 83, 79, 0.25), 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

/* 3. Styled Unlocked Content Cards */
.guide-tip-content-box {
    background: rgba(0, 0, 0, 0.02);
    border: 1px dashed rgba(240, 173, 78, 0.5);
    border-radius: 10px;
    padding: 20px;
    margin-top: 5px;
    max-height: 65vh;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
    transition: all 0.3s ease;
}

body.dark-theme .guide-tip-content-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 179, 0, 0.4);
}

.guide-tip-content-box blockquote {
    background: rgba(240, 173, 78, 0.08);
    border-left: 4px solid #f0ad4e;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-style: normal;
}

.guide-tip-content-box code, 
.guide-tip-content-box pre {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    color: #d9534f;
}

body.dark-theme .guide-tip-content-box code, 
body.dark-theme .guide-tip-content-box pre {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffb300;
}

/* Unlock Success Ripple Animation */
@keyframes guide-unlock-bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.guide-unlock-success {
    animation: guide-unlock-bounce 0.45s ease-in-out;
}

/* ==========================================================================
   Author Header & Guide Button mobile wrap fixes (v1.8)
   ========================================================================== */
.user-info .flex1 > name,
name.has-name-tag-frame {
    display: inline-flex !important;
    width: auto !important;
    max-width: calc(100% - 30px) !important;
    vertical-align: middle !important;
}

.zib-guide-tip-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
}