/* assets/css/tip.css - Logicoria Logic */

/* 1. LIGHT MODE (Default) - COMPACT */
.logicoria-tip {
    display: block !important;
    width: 100% !important;
    background-color: #f0f7ff !important; 
    border: 1px solid #e2e8f0 !important; 
    border-left: 6px solid #3b82f6 !important;
    
    /* Reduced vertical padding (12px) and horizontal (20px) */
    padding: 12px 20px !important;
    border-radius: 4px 12px 12px 4px !important; 
    
    /* Reduced vertical margins to pull it closer to text */
    margin-top: 15px !important; 
    margin-bottom: 15px !important;
    
    box-sizing: border-box !important;
}

.tip-header {
    color: #2563eb !important; /* High-contrast blue */
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    display: block !important;
    /* Tightened space under header */
    margin-bottom: 4px !important;
    letter-spacing: 1.5px !important;
}

.tip-content {
    font-size: 1.05rem !important;
    color: #334155 !important; /* Dark Slate for readability */
    /* Tightened line-height for a smaller box height */
    line-height: 1.4 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* 🌙 2. DARK THEME (Linked to your Toggle Button) */
.dark-theme .logicoria-tip {
    background-color: #1e293b !important; /* Deep Slate Navy */
    border: 1px solid #334155 !important;
    border-left-color: #3b82f6 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.dark-theme .tip-header {
    color: #3b82f6 !important;
}

.dark-theme .tip-content {
    color: #cbd5e1 !important; /* Light Gray for dark mode */
}

/* 📱 3. MOBILE OPTIMIZATION */
@media (max-width: 768px) {
    .logicoria-tip {
        /* Even tighter for mobile screens */
        padding: 10px 15px !important;
        border-left-width: 4px !important;
        margin: 1rem 0 !important;
    }
    .tip-content {
        font-size: 0.95rem !important;
    }
}